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.
- Build the splash animation (first half of the video)
- Setup a normal splash screen
- 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
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 {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flare Welcome',
home: Container()
);
}
}
class HomeView extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Home View'),
),
);
}
}
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.
Never miss a post again 🚀
Get weekly updates on new tutorials, discussions and new flutter features from our newsletter
Also check out

Flare and Flutter - Build a Super cool Gooey slideout menu
A comprehensive guide on building an animation in Flare and adding interactive capabilities to it using Flutter.

SmartFlare - Interactive FlareActors in Flutter - An Experiment
An introduction to SmartFlare, a library that adds interaction to your Flare animations.

Reducing boilerplate code in Flutter using Flare
An experiment to reduce complex animations down to a Gesture detector and a few if statements.