颤动持有闪屏3秒

时间：2018-05-02 08:03:19

标签： android flutter

如何在flutter中显示启动画面3秒钟，然后转到我的登录屏幕下一步。

我试过.countdowntimer但导入尚未解决

         $fname = $_POST['fname'];
         $lname = $_POST['lname'];

         for($i=0, $count = count($fname); $i < $count; $i++){
         $lastname = $lname[$i];
          $firstname = $fname[$i];
         $query = mysqli_query($con,"INSERT INTO 
       persons(firstname,lastname)VALUES('$firstname','$lastname')");
    }

Android Studio＆amp;扑

10 个答案:

答案 0 :(得分：18)

我在每个应用程序中使用的简单解决方案。

在构建方法中使用Timer类 代码段

class SplashScreen extends StatefulWidget {
  @override
  Splash createState() => Splash();
}

class Splash extends State<SplashScreen>  {

  @override
  void initState() {
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
        Timer(
            Duration(seconds: 3),
                () =>
            Navigator.of(context).pushReplacement(MaterialPageRoute(
                builder: (BuildContext context) => LandingScreen())));


    var assetsImage = new AssetImage(
        'images/new_logo.png'); //<- Creates an object that fetches an image.
    var image = new Image(
        image: assetsImage,
        height:300); //<- Creates a widget that displays an image.

    return MaterialApp(
      home: Scaffold(
        /* appBar: AppBar(
          title: Text("MyApp"),
          backgroundColor:
              Colors.blue, //<- background color to combine with the picture :-)
        ),*/
        body: Container(
          decoration: new BoxDecoration(color: Colors.white),
          child: new Center(
            child: image,
          ),
        ), //<- place where the image appears
      ),
    );
  }
}

答案 1 :(得分：2)

您可以使用Future.delayed

延迟执行代码 
new Future.delayed(const Duration(seconds: 3), () {
  Navigator.pushNamed(context, '/login');
});

<强>更新 

const delay = 3;
widget.countdown = delay;

StreamSubscription sub;
sub = new Stream.periodic(const Duration(seconds: 1), (count) {
  setState(() => widget.countdown--);  
  if(widget.countdown <= 0) {
    sub.cancel();
    Navigator.pushNamed(context, '/login');
  }
});

答案 2 :(得分：2)

请参阅波纹管main.dart 

import 'dart:async';    
import 'package:flutter/material.dart';    
import 'src/login_screen.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    new Future.delayed(
        const Duration(seconds: 3),
        () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => LoginScreen()),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: new Column(children: <Widget>[
          Divider(
            height: 240.0,
            color: Colors.white,
          ),
          new Image.asset(
            'assets/logo.png',
            fit: BoxFit.cover,
            repeat: ImageRepeat.noRepeat,
            width: 170.0,
          ),
          Divider(
            height: 105.2,
            color: Colors.white,
          ),
        ]),
      ),
    );
  }
}

希望这对您有帮助

答案 3 :(得分：2)

我需要一个延迟5秒的小部件。我的解决方案如下：

class Waiting extends StatefulWidget {
  @override
  _WaitingState createState() => _WaitingState();
}

class _WaitingState extends State<Waiting> {
  bool voxt = false;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (c, s) => s.connectionState != ConnectionState.done
          ? Text('Waiting')
          : Text('3 sec passed')
    );
  }
}

现在可以在需要的地方调用等待小部件。

答案 4 :(得分：1)

Future.delayed将是一个很好的解决方案没有倒计时。

但考虑到你有一个倒计时，你可以使用Flutter提供的动画框架。

背后的想法是使用持续时间为3秒的AnimationController。实例化splashScreen后立即启动动画。并在动画端添加一个侦听器重定向到/login。

然后将该控制器传递给AnimationBuilder，animationController.lastElaspedDuration将根据class SplashScreen extends StatefulWidget { final Duration duration; const SplashScreen({this.duration}); @override _SplashScreenState createState() => new _SplashScreenState(); } class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin { AnimationController animationController; @override void initState() { animationController = new AnimationController(duration: widget.duration, vsync: this) ..forward() ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pushReplacementNamed(context, '/login'); } }); super.initState(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: animationController, builder: (context, _) { return new Center( child: new Text(animationController.lastElapsedDuration.inSeconds.toString()), ); }, ); } } 处理倒计时的格式化。

override func viewDidLoad() {
    super.viewDidLoad()

    let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture))
    swipeLeft.direction = .left
    self.view.addGestureRecognizer(swipeLeft)

    let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture))
    swipeRight.direction = .right
    self.view.addGestureRecognizer(swipeRight)


}

答案 5 :(得分：0)

我认为您需要清除堆栈中的旧活动（启动画面），因此您必须使用pushNamedAndRemoveUntil而不是仅使用pushNamed。

  new Future.delayed(const Duration(seconds: 3), () {
  Navigator.pushNamedAndRemoveUntil(context, '/login', ModalRoute.withName('/'));
});

答案 6 :(得分：0)

仅当您使用flutter-redux时，此答案才适用。

与flutter-redux一起，您需要使用redux-persist库来显示加载屏幕。

redux-persist用于存储和补充应用状态。

示例：

1.main.dart 

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux_persist_flutter/redux_persist_flutter.dart';

import 'package:flutter_redux_starter/presentation/platform_adaptive.dart';
import 'package:flutter_redux_starter/screens/loading_screen.dart';
import 'package:flutter_redux_starter/store/store.dart';
import 'package:flutter_redux_starter/middleware/middleware.dart';
import 'package:flutter_redux_starter/models/app_state.dart';
import 'package:flutter_redux_starter/routes.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    final store = createStore();

    MyApp();

    @override
    Widget build(BuildContext context) {
        return new PersistorGate(
            persistor: persistor,
            loading: new LoadingScreen(),
            builder: (context) => new StoreProvider<AppState>(
                store: store,
                child: new MaterialApp(
                    title: 'Flutter test App',
                    theme: defaultTargetPlatform == TargetPlatform.iOS
                        ? kIOSTheme
                        : kDefaultTheme,
                routes: getRoutes(context, store),
                    initialRoute: '/login',
                )
            ),
        );
    }

}

2.store.dart 

import 'package:redux/redux.dart';

import 'package:flutter_redux_starter/reducers/app_reducer.dart';
import 'package:flutter_redux_starter/models/app_state.dart';
import 'package:flutter_redux_starter/middleware/middleware.dart';

Store<AppState> createStore() { 
    Store<AppState> store = new Store(
        appReducer,
        initialState: new AppState(),
        middleware: createMiddleware(),
    );
    persistor.start(store);

    return store;
}

在createStore中，您可以使用Future.delayed将存储的创建延迟特定的秒数。

new Future.delayed(const Duration(seconds: 3), () {
 // 
});

答案 7 :(得分：0)

您可以在Future.delayed中使用initState构造函数。这会将SplashScreen保留在导航发生之前指定的持续时间内。

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => new _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState (){
    super.initState();
    // TODO initial state stuff
    new Future.delayed(const Duration(seconds: 4));
  }
  @override
  Widget build(BuildContext context) {
    //build
  }
}

我只从以下地方复制了答案：this

答案 8 :(得分：0)

最简洁的方法，无需添加显式计时器。

使用基于时间的 SplashScreen。

class TimeBasedSplash extends State<MyApp>{

  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 10,
      navigateAfterSeconds: new HomeScreen(),// Where to navigate after 10 secs
      image: new Image.asset('assets/images/flutter_logo.png'),
      photoSize: 200,
      loaderColor: Colors.white,
      styleTextUnderTheLoader : const TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: Colors.white),
     loadingText: new Text('Loading...'),
      gradientBackground: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: <Color>[
          Colors.lightBlue,
          Colors.indigo
        ],
      ),
    );
  }

}

在主类

void main(){
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}


class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new TimeBasedSplash().build(context);
  }
}

答案 9 :(得分：0)

您还可以在 splashScreen 中创建 StatlessWidget()。在家里的MaterialApp()里面：

home: FutureBuilder(
        future: Future.delayed(Duration(seconds: 3)),
        builder: (ctx, timer) => timer.connectionState == ConnectionState.done
            ? ProfileScreen() //Screen to navigate to once the splashScreen is done.
            : Container(
                color: Colors.white,
                child: Image(
                  image: AssetImage('assets/images/download.png'),
                ),
              )),
相关问题
最新问题