A splash screen is a screen that appears when you open an app on your mobile device. Sometimes it’s referred to as a launch screen or startup screen and shows up when your app is loading after you’ve just opened it. When the loading is finished, you’ll be taken to a more functional screen where you can complete actions.
So, In this tutorial, we will see how you can create a Simple Splash Screen in Flutter.
Let's Start
Step 1: Create a new Flutter Application.
Step 2: Remove Default MyHomePage and create a new file as splashscreen.dart and add a Stateful Widget as SplashScreen Once, you are done add this SplashScreen to the home of your MaterialApp.
for example:
|
void main() { runApp(MaterialApp( home: Splashscreen(), )); } |
Now this will be our Splash Screen so, create a new Screen as HomeScreen which will be the main screen in our app.
Step 3: Now we can add our Logo or Text to the splash screen and initialize a Timer in the initState and use Navigator.push to go to our HomeScreen for example:
|
void initState() { // TODO: implement initState super.initState(); Timer( Duration(seconds: 4), () => Navigator.push( context, MaterialPageRoute(builder: (context) => HomeScreen()))); } |
you can control the duration of your SplashScreen inside Timer Duration. Once the given duration finishes we will get navigated to our HomeScreen.
Complete example code to Create Splash Screen in Flutter
|
import 'package:flutter/material.dart'; import 'homescreen.dart'; import 'dart:async';
void main() { runApp(MaterialApp( home: Splashscreen(), )); }
class Splashscreen extends StatefulWidget { @override _SplashscreenState createState() => _SplashscreenState(); }
class _SplashscreenState extends State { @override void initState() { // TODO: implement initState super.initState(); Timer( const Duration(seconds: 4), () => Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => const HomeScreen()), (route) => false)); }
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( height: MediaQuery.of(context).size.height / 2.4, width: MediaQuery.of(context).size.width / 1.5, child: Image.asset( 'assets/splashscreen.png', fit: BoxFit.contain, ), ), const Center( child: Text( 'SplashScreen', style: TextStyle(fontSize: 40, color: Colors.white), ), ), ], ), ); } }
|
output:
 |
 |
Conclusion: In this way, we have learned have to create a simple splash screen in Flutter.
|
Article Contributed By :
|
|
|
|
|
942 Views |
|