How to create an animated splash screen in Flutter

What is a splash screen?

A splash screen is a screen that opens for a very short time whenever the application is launched. A splash screen is also called a launch screen or start screen. As soon as the application icon is clicked to launch it, the splash screen appears.
A splash screen usually appears for two to four seconds and then it disappears, after which the home screen is displayed.

How to create an animated splash screen in Flutter

We can create an animated splash screen that opens with an animation. For this, we will use the built-in Flutter package animated_splash_screen.

We first create a Flutter application with the following command:

flutter create animated_screen

Your application will be created and will have a main.dart file, where we add the following code:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        
        
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage() 
  }
}

Now, we install the package mentioned above with the following code:

flutter pub add animated_splash_screen

This will add the following dependencies in pubspec.yaml.

dependencies:
  animated_splash_screen: ^1.1.0

The code below adds an animated splash screen to your Flutter application. This code is written in the main.dart file.

import 'package:animated_splash_screen/animated_splash_screen.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(
      title: 'Flutter Demo',
      home: AnimatedSplashScreen(splash: Image.asset('assets/images/carbuddy.png'),duration: 3000,
      splashTransition: SplashTransition.fadeTransition,
      backgroundColor: Colors.blueGrey,
      nextScreen: HomePage()),
    );
  }
}

In the animated splash screen, we specify the widget that is to be displayed when the splash screen is launched. Then, we specify the type of transition/ animation for the splash screen, background color, and the next page that is to be launched after the splash screen.

Find the complete code here.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)