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.
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.
FutureBuilder<Widget>(
future: str,
builder: (context, snapshot) {
if (snapshot.hasData) {
return snapshot.data;
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return FlutterLogo(
size: 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.
Future<Widget> fetchStr() async {
await new Future.delayed(const Duration(seconds: 5), () {});
return MaterialApp(
title: 'Splash Screen Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Splash Screen Example'),
),
body: Center(child: Text("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.
import 'dart:async';
import 'package:flutter/material.dart';
Future<Widget> fetchStr() async {
await new Future.delayed(const Duration(seconds: 5), () {});
return MaterialApp(
title: 'Splash Screen Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Splash Screen Example'),
),
body: Center(child: Text("Hello")),
),
);
}
void main() => runApp(MyApp(str: fetchStr()));
class MyApp extends StatelessWidget {
final Future<Widget> str;
MyApp({Key key, this.str}) : super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder<Widget>(
future: str,
builder: (context, snapshot) {
if (snapshot.hasData) {
return snapshot.data;
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return FlutterLogo(
size: 70.0,
);
},
);
}
}
Thanks,
Srikanth