Flutter Full Screen Splash Screen Tutorial

In this example you will learn how to implement Full Screen Splash Screen in Flutter.

You will also learn how to hide status bar on Android OS and notch on iOS in your flutter splash screen.

We will create two screens.

Our launcher screen will be Screen with full screen Image.

And after defined splash time it will navigate to Home Screen.

You will also learn how to use Routes and Navigation in Flutter.

This will be output of our example code.

Flutter Full Screen Splash Screen
Example using Dart
Flutter  Full Screen Splash Screen Page

Replace everything in main.dart file with below source code.

main.dart

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {

// Fixing App Orientation.
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
hintColor: Colors.white,
inputDecorationTheme: new InputDecorationTheme(
labelStyle: new TextStyle(color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0)))),
home: new SplashPage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage()
},
);
}
}

Main part of code in main.dart file is below one.

Here we are assigning SplashPage Widget/Screen to the home property of Parent (MaterialApp Widget).

We have also declared route for SplashPage. which is HomePage.

home: new SplashPage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage()
},

In Above Code Snippet I am defining Route’s. Mapping Different Screens to String Names.

Let’s add Splash Page and Home Page.

Create a new Dart File using your IDE. I am using Android Studio.

And define new class in it named as SplashPage. Which will extend StatefulWidget from Flutter SDK.

Once the timer is executed for defined time limit. We will navigate to HomePage Class using Navigotr in Flutter SDK.

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';

class SplashPage extends StatefulWidget {

@override
SplashPageState createState() => SplashPageState();
}

class SplashPageState extends State<SplashPage> {

// THIS FUNCTION WILL NAVIGATE FROM SPLASH SCREEN TO HOME SCREEN. // USING NAVIGATOR CLASS.

void navigationToNextPage() {
Navigator.pushNamed(context, '/HomePage');
}

startSplashScreenTimer() async {
var _duration = new Duration(seconds: 5);
return new Timer(_duration, navigationToNextPage);
}

@override
void initState() {
super.initState();
startSplashScreenTimer();
}

@override
Widget build(BuildContext context) {

// To make this screen full screen.
// It will hide status bar and notch.
SystemChrome.setEnabledSystemUIOverlays([]);

// full screen image for splash screen.
return Container(
child: new Image.asset('assets/splash.png', fit: BoxFit.fill));
}
}

Second Screen After Splash (Home Screen)

This is your Home Screen/Dashboard. You can do whatever you want 🙂

I have just added a Scaffold Widget and a Container.

import 'package:flutter/material.dart';

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

class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: kGroceryAppBarBackgroundColor,
title: new Text('HOME'),
centerTitle: true,
),

body: new Container());
}
}

copyright : http://developine.com/

Hello! I am Hammad Tariq. Jack of All trades and Yet master of Many! Senior Android Application Developer | Cross-platform Development | Flutter | Backend Development (Spring Boot + Kotlin + MySQL) | Blogger | Founder I am an all-around Mobile Developer who is passionate about learning the latest technologies and trends. I graduated from Air University Islamabad, Pakistan in 2015 but started working on Android Development, Universal Windows Apps development long before that. Currently, I am working as a team lead and Senior Android Developer at EVAMP SAANGA, Pakistan.
Posts created 42

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top