Flutter Splash Screen

Flutter splash screen app

Import the image files

We need to import the image files into the project. It is common practice to put image files in a images or assets folder at the root of a Flutter project.

Declare the Image in the pubspec.yaml

pubspec.yaml

flutter:
uses-material-design:
true

assets:
- images/flutterwithlogo.png

main.dart File

packages

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_ui_splash_screen/homeScreen.dart';
package:flutter_ui_splash_screen/homeScreen.dart is the another class.

main function

void main() {
runApp(new MaterialApp(
home: new SplashScreen(),
routes: <String, WidgetBuilder>{
'/HomeScreen': (BuildContext context) => new HomeScreen()
},
));
}

When a named route is pushed with [Navigator.pushNamed], the route name is looked up in this map.

If [home] is specified, then it implies an entry in this table for the [Navigator.defaultRouteName] route (`/`), and it is an error to redundantly provide such a route in the [routes] table.

SplashScreen class

In this class extends to StatefulWidget.

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

Stateful widget are useful when the part of the user interface you are describing can change dynamically.

SplashScreen State

This class extends to SplashScreen class.

[StatefulWidget], where the current configuration of a [State] is hosted, and whose documentation has sample code for [State].

class _SplashScreenState extends State<SplashScreen> {
  startTime() async {
var _duration = new Duration(seconds: 2);
return new Timer(_duration, navigationPage);
}
Timer: The [callback] function is invoked after the given [duration]. Here callback is navigationPage and duration is _duration.
void navigationPage() {
Navigator.of(context).pushReplacementNamed('/HomeScreen');
}
pushReplacementNamed: Replace the current route by pushing the route named [routeName] and then disposing the previous route.
@override
void initState() {
super.initState();
startTime();
}
initState(): The framework will call this method exactly once for each [State] object it creates.If you override this, make sure your method starts with a call to
super.initState().
  @override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Image.asset('images/flutterwithlogo.png'),
),
);
}
}

Creating Home class

flutterProjectDirectory -> lib -> homescreen.dart
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => new _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('HomeScreen'),
),
body: new Center(
child: new Text('Welcome to Home.!'),
),
);
}
}
full code: https://github.com/vignesh7501/flutter-UI-splash-screen

Sample Screen

flutter splash screen demo
Like what you read? Give Vignesh Prakash a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.