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.

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/