Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

flutter
communitycreator

How to create an animated splash screen in Flutter

Hammad Qayyum

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.

RELATED TAGS

flutter
communitycreator
RELATED COURSES

View all Courses

Keep Exploring