How to Add Splash Screen in Flutter App? - GeeksforGeeks

18 Oct, 2021
We all have heard of Flutter right, it’s a cross-platform application development tool. Flutter can be used to make Android, IOS, and Web applications with just one code base (Dart programming language). In this article let’s see how we can add a splash screen to our applications.
When we open an application on our phones, the first thing we see is a screen with the logo of the app in the center that screen is referred to as a splash screen Now this splash screen can be used to make our applications look fancy but there’s more to it.
When we open an app on our device, some apps are required to authenticate the user (who’s opening the app) before they let us use the app. This authentication sometimes requires a fraction of a second during which time the user is presented with a splash screen so that the application does not appear to be stuck.
Flutter is all about packages, there is always a package available for our use. In this problem of ours, we will use a package called animated_splash_screen.
To install this package, add the following code to the pubspec.yaml file and run pub get :
dependencies:
  animated_splash_screen: ^1.1.0
Note: Watch the indentation, if you get the indentation wrong you will get an error and we definitely don’t like errors.
When we create a flutter app from scratch, we will see some boilerplate code like the one below, in the main.dart file.
Dart
import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {      // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(              // Application name      title: 'Flutter Hello World',              // Application theme data, you can set      // the colors for the application as      // you want      theme: ThemeData(        primarySwatch: Colors.blue,      ),              // A widget which will be started on application startup      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}  class MyHomePage extends StatelessWidget {  final String title;    const MyHomePage({@required this.title});    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(                  // The title text which will        // be shown on the action bar        title: Text(title),      ),      body: Center(        child: Text(          'Hello, World!',        ),      ),    );  }}
In the above code instead of returning MyHomePage, we will return an AnimatedSplashScreen which has also required a nextScreen, where we will return our MyHomePage. Like this:
Dart
import 'package:flutter/material.dart';import 'package:animated_splash_screen/animated_splash_screen.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {      // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(              // Application name      title: 'GFG tutotial',              // Application theme data, you can set the      // colors for the application as      // you want      theme: ThemeData(        primarySwatch: Colors.green,      ),              // A widget which will be started on application startup      home: AnimatedSplashScreen(        splash: 'images/gfg.png',        nextScreen: MyHomePage(title: 'GeeksForGeeks'),        splashTransition: SplashTransition.fadeTransition,      ),    );  }}  class MyHomePage extends StatelessWidget {  final String title;    const MyHomePage({@required this.title});    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(                  // The title text which will be shown on the action bar        title: Text(title),      ),      body: Center(        child: Text(          'GeeksForGeeks!',        ),      ),    );  }}
To use our own image for the splash screen we have to include the images under the assets section in pubspec.yaml file :
Output :
Flutter UI-components
TrueGeek-2021
Dart
Flutter
TrueGeek
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs