Splash or Welcome screen in Flutter

<p>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](</p> <p>There are two important parts of this program.</p> <ol> <li>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;](FlutterLogo( size: color: #b5cea8;](70.0, ); }, ); While waiting for the future to complete, it shows the flutter logo.</li> <li>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")), ), );}</li> </ol> <p id="ce9178;](" color:="" color:="">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;](FlutterLogo( size: color: #b5cea8;](70.0, ); }, ); }}</p> <p>Hope this example is useful to you. Thanks,Srikanth</p>