Flutter splash screen tutorial for beginners

Flutter splash screen :

Flutter splash screen appears as the first screen when you open the app, there we can display a image, video or animation file.

Mean while app data can be loaded on backend and make user ready to utilize the app services by making use of the time available in splash.

Flutter splash screen is a optional screen but its a better practice to add it to the app to also promote your brand on every app you provide.

You can add video’s, stylish animations which provide some extra information regarding to your app, or just display your app logo with any animation.

Popular social networking app like facebook provide a splash screen on its every app like facebook, whatsapp, instagram, messenger and more so that user’s can know its being powered by facebook.

Flutter splash screen Video Tutorial :

Go through the below tutorial for detailed implementation of splash screen.

Flutter splash screen Project Structure :

The image below depicts the project structure for flutter splash screen.

pubspec.yaml :

Add a image to be displayed in the flutter splash screen under assets folder

assets:
   - ac_logo.png

main.dart :

Initialize with void main() and consider default class MyApp()

main() {
  runApp(MyApp());
}

create a state in our stateful widget

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SplashScreenState();
  }
}

Make use of a Future.delayed and provide a time duration so that a task is performed after the lapsing of time interval, here we can provide duration in terms of hours, minutes, seconds and more…

But based on the current context we need small time periods so we use seconds and then route the user to next screen.

Future.delayed(Duration(seconds: 8), () {
  Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => HomeScreen(),
      ));
});

We are trying to display a image till the timer interval is running this image is loaded from assets with specified width and height.

child: Image.asset('assets/ac_logo.png',width: 300,height: 300)

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_splashscreen/home.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SplashScreen()); // define it once at root level.
  }
}

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 8), () {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomeScreen(),
          ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/ac_logo.png',width: 300,height: 300)
      ),
    );
  }
}

home.dart :

We move to a new screen home from flutter splash screen after a duration of 8 seconds is completed where we display a sample text

children: <Widget>[

  Text("Home Screen")

],

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Text("Home Screen")

          ],
        ),
      ),
    );
  }
}