Splash Screen in Flutter

Learn About Splash Screen with Source Code

Android Splash Screen is the primary screen visible to the user when the application’s launched. The splash screen is one of the foremost imperative screens within the application since it's the user's first involvement with the application.

Splash screens are utilized to show a few activities(typically of the application logo) and illustrations while a few data for the other screens are fetched.

Hello Guys, today we are going to make simple splash screen in flutter.

Let's get started.

We are creating a splash screen that's got to show our app branding basically for the initial three seconds and then load our homepage. So let's start and build this.

1. First create the simple screen with a stateful class.

2. Then create another page homepage.dart. After splash screen home page will get open.

3. Now the important and main thing is to navigate to home page from splash screen after 3-4 seconds. So first import the library in main.dart file.

import 'dart:async';

4. It's basically used for your asynchronous programming because we are going to use asynchronous programming in features in this so that's why we need that so.

5. Now, let's move to the state class and this code.

6. Here we can initialize that a five-second delay is introduced at a three-second delay which is going to be uploading our home screen. Use the Timer widget and give it a duration and call navigator.

7. Here is the simple code of creating Splash Screen.

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
));
}

class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => new _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
Timer(
Duration(seconds: 3),
() => {
Navigator.of(context).pushAndRemoveUntil<dynamic>(MaterialPageRoute<dynamic>(builder: (context) => HomePage()), (Route<dynamic> route) => false),
}
);
super.initState();
}

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child:Container(
margin: EdgeInsets.all(16.0),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 100,),
SizedBox(height: 20,),
Text("Hello Flutter", style: TextStyle( fontSize: 20,
fontWeight: FontWeight.bold)),
SizedBox(height: 300,),
CircularProgressIndicator(),
],
),

]
),
),
),
);
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
body: Center(
child: Text("Welcome to Home Page",style: TextStyle(fontWeight: FontWeight.bold),),
),
),
);
}
}
Hope it will be helpful. You can create Splash Screen in a very attractive by adding some animations, by adding some small GIFS, etc.
Output of Above Code:


Previous
Next Post »

1 comments:

Click here for comments
www.XMC.pl
admin
1 November 2020 at 09:55 ×

We came across a cool web-site which you could appreciate. Take a search should you want.

Congrats bro www.XMC.pl you got PERTAMAX...! hehehehe...
Reply
avatar