Tutorials

Snippets

Search

Tags

Subscribe on Youtube

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

Splash animation gif

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

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.

Also check out

Cover image

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.

Link
Cover image

SmartFlare - Interactive FlareActors in Flutter - An Experiment

An introduction to SmartFlare, a library that adds interaction to your Flare animations.

Link
Cover image

Reducing boilerplate code in Flutter using Flare

An experiment to reduce complex animations down to a Gesture detector and a few if statements.

Link