Flutter Animated Splash screen with Flare

A good first impression (at least to me) is a good looking splash screen followed by a nice intro. Whether that’s a simple fade in, a slide in, or anything in between. In this tutorial we’ll use an animation created in Flare to show after our SplashScreen has been shown. Something like this

To do this we’ll do three things.

1. Build the splash animation (first half of the video)
2. Setup a normal splash screen
3. Show the intro Flare animation

Number 1 will be covered in the video because it’s easier and will save on a lot of writing / screenshot taking time. Number 2 will follow exactly this tutorial of mine. So we’ll just show the code for number 3.

Download Flare animation assets here

Show the intro Flare animation

To do this we’ll install a package called flare_splash_screen. Add the latest version into your pubspec.

flare_splash_screen: ^2.0.1+2

Then we want to add the splash.flr asset file into our app and the pubspec as well. Create an assets folder in the root of the project and put your splash.flr file in there. Then in the pubspec add the asset as an entry.

# To add assets to your application, add an assets section, like this:
assets:
  - splash.flr

Clean up your main.dart file and remove all the additional code for the HomeScreen and just make an empty HomeView like below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Welcome',
      home: Container()
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home View'),
      ),
    );
  }
}

Adding the (After) Splash Intro

We’ll import the SplashScreen package then return our SplashScreen as the home widget. This widget has a lot of options, but we’ll cover the ones required for our functionality. We give it the path to the file, then we’ll give it the view we want it to navigate to afterwards, the name of the animation to play and the background color.

import 'package:flare_splash_screen/flare_splash_screen.dart';

...

return MaterialApp(
  title: 'Flare Welcome',
  home: SplashScreen(
    'assets/splash.flr',
    HomeView(),
    startAnimation: 'intro',
    backgroundColor: Color(0xff181818),
  ),
);

That’s all there is to it. Check out the other tutorials as well. I create a video tutorial every week.