Flutter hold splash screen for 3 Seconds. How to implement splash screen in Flutter?

前端 未结 9 2005
后悔当初
后悔当初 2021-02-16 00:16

How to show splash screen in flutter for 3 seconds and then go next my login screen.

I have tried.countdowntimer but import is unresolved

import \'pack         


        
相关标签:
9条回答
  • 2021-02-16 00:24

    refer bellow 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,
              ),
            ]),
          ),
        );
      }
    }
    

    Hope this will helps you

    0 讨论(0)
  • 2021-02-16 00:26

    You can use Future.delayed constructor in your initState. This will keep your SplashScreen for the duration you specify before the navigation happen.

    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
      }
    }
    

    I only copied the answers from:this

    0 讨论(0)
  • 2021-02-16 00:30

    Future.delayed would be a good solution without a countdown.

    But considering you have a countdown, you can use the animation framework Flutter provides.

    The idea behind it would be to use an AnimationController with a duration of 3 seconds. Start the animation as soon as the splashScreen is instantiated. And add a listener to redirect to /login on animation end.

    Then pass that controller to an AnimationBuilder which would handle the formating of your countdown based on 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()),
            );
          },
        );
      }
    }
    
    0 讨论(0)
  • 2021-02-16 00:31

    Simple solution which i use in every app.

    Use Timer class in build method code snippet

    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
          ),
        );
      }
    }
    
    0 讨论(0)
  • 2021-02-16 00:34

    I needed a widget with 5 seconds delay. My solution was as following:

    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')
        );
      }
    }
    

    Now Waiting widget can be called where needed.

    0 讨论(0)
  • 2021-02-16 00:35

    The cleanest approach without adding explicit timers.

    Use Time based 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
            ],
          ),
        );
      }
    
    }
    

    In main class

    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);
      }
    }
    
    0 讨论(0)
提交回复
热议问题