How to await splash screen while loading a home screen in flutter - flutter

Question

My application takes some time to load to the home screen, and also takes time to fetch all the data from the API. so I need a splash screen for the application. but it should wait for 3 seconds (the time that takes to load the home screen). so I want to cover the waiting time with a splash screen.
How do I achieve this?

Answer 1

You can also have a minimal Flutter app running while you await the more expensive initialization. Just call runApp twice!
void main () async {
runApp(SomethingAnimated());
await longTaskOne();
await longTaskTwo();
await longTaskThree();
runApp(MyRealTopLevel();
}
Yes this is perfectly legal and documented.
EDIT: I made a video about this, and also about warming up RiverPod pre-fetched data, at https://youtu.be/ob8M9c-6III.

Answer 2

Use you own custom image of splashscreen or design new one here.increase or decrease time but less time is better
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
// TODO: implement initState
super.initState();
startTime();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
body: new Stack(
alignment: Alignment.center,
children: <Widget>[
Center(
child: new Image.asset(
'assets/images/splash.png',
width: size.width,
height: size.height,
fit: BoxFit.fill,
),
),
],
),
),
);
}
startTime() async {
var _duration = new Duration(seconds: 5);
return new Timer(_duration, navigationPage);
}
void navigationPage() {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (context) => DashBoardScreen()),
ModalRoute.withName("/login"));
}
}

Answer 3

You can add a image as a splashscreen using this method,
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Timer(
Duration(seconds: 5),
() => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Home())));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(20, 172, 168, 1),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 60.0,
child: new Image.asset(
'assets/images/tree.jpg',
width: 70,
height: 90,
)),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
'Your Text here!!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
'Your Text here!!',
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}
And if you want to increase or decrease the time span then you can change this
Timer(const Duration(seconds: 3).