Flutter Animated Splash Screen (original) (raw)

Last Updated : 05 Mar, 2025

The Animated Splash screen is used for a startup screen in a Flutter application. More or less all applications use them generally to show the logo of the institution and its creators awareness. This although holds no functionality but it can be great to increase product awareness and promotion.

Let's look deep into the implementation of the Animated Splash screen with the help of a simple application.

Steps to Implement Animated Splash Screen in Flutter

Step 1 : Adding the Dependency

The **flutter_animated_splash dependency can be added to the **pubspec.yaml file as shown below:

dependencies:
flutter_animated_splash: ^1.3.0

Now run the below command in terminal.

flutter pub get

Step 2 : Importing the Dependency

To import the flutter_animated_splash dependency to the **main.dart file, use the following line of code:

import 'package:flutter_animated_splash/flutter_animated_splash.dart';

Step 3 : Designing the App Structure

The **StatelessWidget can be used to give a simple structure to the application that contains an appbar and a body for the content as shown below:

Dart `

import 'package:flutter/material.dart'; import 'package:flutter_animated_splash/flutter_animated_splash.dart';

// This function triggers the build process void main() => runApp(const MyApp());

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: AnimatedSplash(
                type: Transition.fade,
                curve: Curves.fastEaseInToSlowEaseOut,
                backgroundColor: Colors.white,
                navigator: HomePage(),
                durationInSeconds: 3,
                child: Image.network(
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png",
                ),
        ),
    );
}

}

Step 4 : Creating the Homepage

Make use of the **StatefulWidget that extends to an appbar and a body.

Dart `

class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key);

@override State createState() => _HomePageState(); }

class _HomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.green, foregroundColor: Colors.white, title: const Text( "GeeksforGeeks", ), automaticallyImplyLeading: false, ), body: const Center( child: Text( "Welcome to GFG", style: TextStyle(color: Colors.black, fontSize: 30), ), ), ); } }

Complete Source Code (main.dart)

main.dart `

import 'package:flutter/material.dart'; import 'package:flutter_animated_splash/flutter_animated_splash.dart';

// This function triggers the build process void main() => runApp(const MyApp());

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: AnimatedSplash(
            type: Transition.fade,
            curve: Curves.fastEaseInToSlowEaseOut,
            backgroundColor: Colors.white,
            navigator: HomePage(),
            durationInSeconds: 3,
            child: Image.network(
                "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/GeeksforGeeks.svg/2560px-GeeksforGeeks.svg.png",
            ),
        ),
    );
}

}

class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key);

@override State createState() => _HomePageState(); }

**Output: