Splash screen in Flutter

Aman Bhatt

4 May 2023

The splash screen in Flutter is the first screen that is seen by a user when the application is launched.

Actually, this is the time when the application is organizing the resources which are needed to run the application.

Developers can customize the splash screen in various ways according to their requirements.

In this article, we will learn how we can display the splash screen.

You may also check our Flutter app development page.

Splash Screen in Flutter using Timer() function

Here is a piece of code that uses the timer() function to show the splash image til a given time interval.

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
  runApp(SplashScreenApp());
}

class SplashScreenApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeView(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() =&gt; _HomeViewState();
}
class _HomeViewState extends State&lt;HomeView&gt; {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 13),
            ()=&gt;Navigator.pushReplacement(context,
            MaterialPageRoute(builder:
                (context) =&gt;
                    OtherScreen()
            )
        )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child:FlutterLogo(size:MediaQuery.of(context).size.height)
    );
  }
}
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("Splash Screen in Flutter")),
      body: Center(
        // your UI here
      ),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';

void main() {

runApp(SplashScreenApp());

}

class SplashScreenApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Splash Screen',

theme: ThemeData(

primarySwatch: Colors.blue,

home: HomeView(),

debugShowCheckedModeBanner: false,

);

}

class HomeView extends StatefulWidget {

@override

_HomeViewState createState() => _HomeViewState();

}

class _HomeViewState extends State<HomeView> {

@override

void initState() {

super.initState();

Timer(Duration(seconds: 13),

()=>Navigator.pushReplacement(context,

MaterialPageRoute(builder:

(context) =>

OtherScreen()

)

);

}

@override

Widget build(BuildContext context) {

return Container(

color: Colors.white,

child:FlutterLogo(size:MediaQuery.of(context).size.height)

);

}

class OtherScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title:Text("Splash Screen in Flutter")),

body: Center(

// your UI here

);

}

So let’s discuss what’s happening here.

If you are aware of the basic Flutter code then main() function is the starting point of the application.

runApp(SplashScreenApp()) initializes the Stateless Widget SplashScreenApp.

You then return the title, theme, and home properties to MaterialApp.

MyHomePage() returns a Container that has a child as FlutterLogo(which will be shown initially when the app starts).

initState() first call super.initState() and then Timer of duration 13 seconds.

After 13 seconds, the current screen will be replaced by a new Screen i.e. OtherScreen().

Using splashscreen package

Add the dependency splashscreen to your pubspec.yaml file

Now import the package to your file as below.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
void main() {
  runApp(SplashScreenApp());
}
  
class SplashScreenApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomeView(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SplashScreen(
      seconds: 13,
      navigateAfterSeconds: new OtherScreen(),
      title: new Text('Mobikul',textScaleFactor: 2,),
      image: new Image.network('&lt;your image URL here&gt;'),
      loadingText: Text("Loading"),
      photoSize: 100.0,
      loaderColor: Colors.blue,
    );
  }
}
class OtherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("Splash Screen in Flutter")),
      body: Center(
        // your UI here
      ),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:splashscreen/splashscreen.dart';

void main() {

runApp(SplashScreenApp());

}

class SplashScreenApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Splash Screen',

theme: ThemeData(

primarySwatch: Colors.green,

home: HomeView(),

debugShowCheckedModeBanner: false,

);

}

class HomeView extends StatelessWidget {

@override

Widget build(BuildContext context) {

return SplashScreen(

seconds: 13,

navigateAfterSeconds: new OtherScreen(),

title: new Text('Mobikul',textScaleFactor: 2,),

image: new Image.network('<your image URL here>'),

loadingText: Text("Loading"),

photoSize: 100.0,

loaderColor: Colors.blue,

);

}

class OtherScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title:Text("Splash Screen in Flutter")),

body: Center(

// your UI here

);

}

In the above code, we are using the splashscreen package to display the splash image from the network.

After completing 13 seconds, it will navigate to a new screen.

Conclusion

Here is the expected result.