How can i set the duration in flutter splash screen dynamically?

Question

flutter splash screen is displayed on the screen before the home page. But the homepage has some data fetched from the internet. The duration of the splash screen is set to a fixed second. I'm interested just to know that is there a way in flutter such that the splash screen is visible on the screen until all the data are loaded on the next screen?

my splash screen class

import 'dart:async';
import 'package:flutter/material.dart';
import 'listview.dart';

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 5),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => restlistview())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: DecoratedBox(
        position: DecorationPosition.background,
        decoration: BoxDecoration(
            color: Colors.white,
            image: DecorationImage(
                image: NetworkImage(
                  'https://i.imgur.com/KS9AbXK.png',
                ),
                fit: BoxFit.cover)),
        child: Image.network('https://i.imgur.com/o4ZRh9k.png'),
      ),
    );
  }
}

The class that comes after the splash screen

import 'package:flutter/material.dart';

class restlistview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "ListView List";

    List choices = const [
      const Choice(
          title: 'Artisan Coffee',
          Address: 'Kumarpara,Sylhet',
          imglink: 'https://i.imgur.com/9TUi7ts.png'),
      const Choice(
          title: 'Cafe Aarko',
          Address: 'Barutkhana,Sylhet',
          imglink: 'https://i.imgur.com/JEfDpIZ.png?1'),
      const Choice(
          title: 'Cafe La vista',
          Address: 'Zindabazar,Sylhet',
          imglink: 'https://i.imgur.com/u4Lvc4k.png'),
      const Choice(
          title: 'Coffee Club',
          Address: 'Kumarpara,Sylhet',
          imglink: 'https://i.imgur.com/gVoh8xO.png'),
      const Choice(
          title: 'Peepers',
          Address: 'Zindabazar,Sylhet',
          imglink: 'https://i.imgur.com/izRo3Tj.png'),
      const Choice(
          title: 'The Swad Restaurant',
          Address: 'Zindabazar,Sylhet',
          imglink: 'https://i.imgur.com/o4ZRh9k.png'),
    ];

    return MaterialApp(
        title: title,
        home: Scaffold(
            appBar: AppBar(
              title: Image.network(
                'https://i.imgur.com/Z9ETdwa.png',
                fit: BoxFit.cover,
              ),
              backgroundColor: Color(0xffB01C2A),
            ),
            body: DecoratedBox(
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                    color: Color(0xffFAAF40),
                    image: DecorationImage(image: NetworkImage(''))),
                child: new ListView(
                    shrinkWrap: true,
                    padding: const EdgeInsets.only(top: 10.0),
                    children: List.generate(choices.length, (index) {
                      return Center(
                        child: ChoiceCard(
                            choice: choices[index], item: choices[index]),
                      );
                    })))));
  }
}

class Choice {
  final String title;
  final String Address;
  final String imglink;

  const Choice({this.title, this.Address, this.imglink});
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard(
      {Key key,
      this.choice,
      this.onTap,
      @required this.item,
      this.selected: false})
      : super(key: key);

  final Choice choice;

  final VoidCallback onTap;

  final Choice item;

  final bool selected;

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = Theme.of(context).textTheme.display1;

    if (selected)
      textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);

    return Card(
        elevation: 0.0,
        color: Color(0xffB01C2A).withOpacity(0.2),
        child: Row(
          children: [
            new Container(
                color: Colors.transparent,
                height: 100,
                width: 100,
                padding: const EdgeInsets.only(
                    top: 8.0, bottom: 8.0, left: 0.0, right: 8.0),
                child: Image.network(choice.imglink)),
            new Container(
              padding: const EdgeInsets.only(
                  top: 30.0, bottom: 8.0, left: 2.0, right: 8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(choice.title,
                      style: TextStyle(
                          fontSize: 20,
                          color: Color(0xffB01C2A),
                          fontWeight: FontWeight.bold)),
                  Text(choice.Address,
                      style: TextStyle(
                          color: Colors.black.withOpacity(1.0),
                          fontWeight: FontWeight.bold)),
                ],
              ),
            )
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
        ));
  }
}

main class

import 'package:flutter/material.dart';
import 'package:sylhetrestaurant/splashscreen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext contextP) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: SplashScreen());
  }
}

Josteve Josteve · Accepted Answer · 2020-08-15T08:18:31

Yes, you can. The logic is to wait for the fetchData function to finish before you Navigate to the other screen

One way to do it

initState(){
 super.initState();
 leaveSplashScreen();
}

Future fetchData()async{
//Fetch your data here.
}

void leaveSplashScreen() async{
  await fetchData();
  Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => restlistview())));
}

Another way to do it.

initState(){
 super.initState();
 fetchData().then((value){
   Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => restlistview())));
 });
}

Future fetchData()async{
//Fetch your data here.
}

How can i set the duration in flutter splash screen dynamically?

1 Answers