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

Question

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 'package: countDown/countDown.dart';
CountDown cd  =  new CountDown(new Duration(seconds: 4));
CountDown is unresolved 

Android Studio & Flutter

Solution 1

You can execute code with a delay using Future.delayed

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

update

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

Solution 2

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

Solution 3

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

Solution 4

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()),
        );
      },
    );
  }
}

Solution 5

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.

View more solutions

Comments

[Deepak Ror]

But for countdown time what have to do?

[Günter Zöchbauer]

Why not? . . . .

[Rémi Rousselet]

Because you have to manually update the countdown. If you wanted to display seconds/milliseconds you'd have to change the refresh tick. Using a AnimationController with the duration of your countdown combined with a AnimatedBuilder will allow more flexibility while not having to bother with refresh.

[Günter Zöchbauer]

Sounds reasonable.

[Deepak Ror]

where should I call this future code . I mean i don't want to onClick

[Günter Zöchbauer]

You can use initState of AppWidget (somewhat depending on how your code and widgets are structured)

[Günter Zöchbauer]

@RémiRousselet Do you know why the comment with a link to your answer was removed?

[Rémi Rousselet]

I removed it. In the end considering he ask for a countdown, it's not really a duplicate.

[Günter Zöchbauer]

You can still add it as comment for reference or adapt it and post another answer here.

[Deepak Ror]

I think best solution will be this only for splash . = new Timer(const Duration(seconds: 5), goToLogin);. Where gotoLogin(){}

[Günter Zöchbauer]

@DeepakKanyan what would be the advantage of that? Especially with the update that the screen should be updated periodically (every second)?

[Günter Zöchbauer]

@RémiRousselet great. Didn't see :D

[GunJack]

If I press back button. Wouldn't I come back to the splash screen?

[Quick learner]

What is the current situation when you press back button ? Can you tell me so I can update answer

[GunJack]

Its okay now. I wasn't aware about the pushReplacement() method. But I did a weird thing. In main.dart, I defined LandingScreen() and then in its initState(), I did pushReplacement to SplashScreen(). SplashScreen have this code You provided here. I was trying to achieve this without changing the home: in main.dart. It ended up in all kinds of error.

[Quick learner]

Okay I got you.. I provided the first screen after main ..if you want me to provide main.dart class also I can update code as well

[GunJack]

I understand what you did and I made it working now.

[GunJack]

I know this is off topic, but while the splash screen is being displayed. Can I fetch json data in background?

[Quick learner]

You need to use a background plugin to do task in background ,but background plugin might not work in IOS ,you if I had to get data in background I would have just looked for any other way