How to add an animated splash screen to a Flutter application

Google Cloud Community Articles
, , ,
1

A splash screen (also known as a launch or startup screen) is the first screen you see when you open your application. In this article, we’ll cover how to add an animated splash screen to a Flutter application.

If you have any questions, please leave a comment below!

Let’s look into the implementation of an animated splash screen with the help of the below steps:

  • Add the dependency in pubspec.yaml file
  • Import the dependency to the main.dart file
  • Add the asset (logo) to the asset folder for use in the application
  • Add the asset to the pubspec.yaml file
  • Create the Homepage for which to transition after the splash screen

Now, let’s look into the steps in detail.

Adding the dependency: animated_splash

This package can be used to animate any logo/image in the splash screen.

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

dependencies:
  flutter:       # Required for every Flutter project
    sdk: flutter # Required for every Flutter project
     animated_splash: ^1.3.0

The pubspec file specifies dependencies that the project requires, such as particular packages (and their versions), fonts, or image files. It also specifies other requirements, such as dependencies on developer packages (like testing or mocking packages), or particular constraints on the version of the Flutter SDK.

Installation (use this package as a library)

Run this command with Flutter:

$ flutter pub add animated_splash_screen

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  animated_splash_screen: ^1.3.0

Alternatively, your editor might support flutter pub get

Importing the dependency

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

import 'package:animated_splash/animated_splash.dart';

Activating the asset

To use the logo image, the assets need to be added to the assets path as shown below.

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

Here is an example:

flutter:
  assets:
    - assets/propecia.png
    - assets/background.png

To include all assets under a directory, specify the directory name with the / character at the end:

flutter:
  assets:
    - directory/
    - directory/subdirectory/

Adding the logo

Create an assets directory inside the root directory of the project. Inside the logo that you want to use inside the assets directory as shown below:

bhardwaju_0-1685463460750.png
bhardwaju_0-1685463460750.png720×579 136 KB

Putting it all together

In the below code, we will return an AnimatedSplashScreen which has also required a nextScreen, where we will return our Our Home Page.

Note: Below is a sample code, which is provided to give you an idea of the syntax, so please make appropriate changes before using it in the dev environment.

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: 'Propecia',
		
	// 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: AnimatedSplashScreen(
		splash: 'images/propecia.png',
		nextScreen: MyHomePage(title: 'Organon'),
		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(
		'Organon',
		),
	),
	);
}
}

Customizations

You can also customize the animation of the splash screen with your liking using the below customization options.

Splash Parameter

Here, you can pass:

  • String with assets route;
  • String with your url Image, don’t forget of pass tag like this “[n]www.my-url.com/my-image.png”;
  • IconData;
  • Widget;

SplashTransition

enum SplashTransition {
  slideTransition,
  scaleTransition,
  rotationTransition,
  sizeTransition,
  fadeTransition,
  decoratedBoxTransition
}

PageTransitionType

enum PageTransitionType {
  fade,
  rightToLeft,
  leftToRight,
  upToDown,
  downToUp,
  scale,
  rotate,
  size,
  rightToLeftWithFade,
  leftToRightWithFade,
}

Others

AnimatedSplashScreen({
    Curve curve = Curves.easeInCirc,
    Future Function() function, // Here you can make something before change of screen
    int duration = 2500,
    @required dynamic splash,
    @required Widget nextScreen,
    Color backgroundColor = Colors.white,
    Animatable customTween,
    bool centered = true,
    SplashTransition splashTransition = SplashTransition.fadeTransition,
    PageTransitionType pageTransitionType = PageTransitionType.downToUp,
 })

Future screen

Here you can do something that will return your next screen, ex:
AnimatedSplashScreen.withScreenFunction(
  splash: 'images/splash.png',
  screenFunction: () async{
    return MainScreen();
  },
  splashTransition: SplashTransition.rotationTransition,
  pageTransitionType: PageTransitionType.scale,
)
3 Likes
2

Hi!
Can AnimatedSplashScreen handle GIF or SVG formats (as asset string or widget)? Also, are there any recommended image dimensions or aspect ratios?
Thank you!