In this article, I'm going to show you how to create a splash or welcome screen in Flutter.
We are going to create the below example app for this article.
![](https://fluttercentral.com/Uploads/e745e39a-7335-49d8-9930-aa8e764e7052.gifwidth="50%height="auto](
There are two important parts of this program.
1) Showing the Splash or Welcome screen. It can be achieved by using a FutureBuild as below.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #4ec9b0;](FutureBuilder( future: str, builder: (context, snapshot) { color: #c586c0;](if (snapshot.hasData) { color: #c586c0;](return snapshot.data; } color: #c586c0;](else color: #c586c0;](if (snapshot.hasError) { color: #c586c0;](return color: #4ec9b0;](Text(color: #ce9178;]("${color: #9cdcfe;](snapshot.errorcolor: #ce9178;](}"); } color: #c586c0;](return color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](70.0, ); }, );
While waiting for the future to complete, it shows the flutter logo.
2) Here is the function that FutureBuilding is waiting to finish. In order to mimic the load functionality, we are just halting the function for 5 seconds and returning a MaterialApp.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #4ec9b0;](Future color: #dcdcaa;](fetchStr() color: #c586c0;](async { color: #c586c0;](await color: #c586c0;](new color: #4ec9b0;](Future.color: #dcdcaa;](delayed(color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](5), () {}); color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('Splash Screen Example', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]('Splash Screen Example'), ), body: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello")), ), );}
Usually, this is where you wait for your application to finish the first setup or loading from the internet.
Here is the full code from main.dart file. You can copy-paste and run to see the output.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('dart:async';color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #4ec9b0;](Future color: #dcdcaa;](fetchStr() color: #c586c0;](async { color: #c586c0;](await color: #c586c0;](new color: #4ec9b0;](Future.color: #dcdcaa;](delayed(color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](5), () {}); color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('Splash Screen Example', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]('Splash Screen Example'), ), body: color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello")), ), );}
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp(str: color: #dcdcaa;](fetchStr()));
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](final color: #4ec9b0;](Future str;
color: #4ec9b0;](MyApp({color: #4ec9b0;](Key key, color: #569cd6;](this.str}) : color: #569cd6;](super(key: key);
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](FutureBuilder( future: str, builder: (context, snapshot) { color: #c586c0;](if (snapshot.hasData) { color: #c586c0;](return snapshot.data; } color: #c586c0;](else color: #c586c0;](if (snapshot.hasError) { color: #c586c0;](return color: #4ec9b0;](Text(color: #ce9178;]("${color: #9cdcfe;](snapshot.errorcolor: #ce9178;](}"); } color: #c586c0;](return color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](70.0, ); }, ); }}
Hope this example is useful to you.
Thanks,Srikanth