When it comes to creating an application, aesthetics, font choice, and the overall look and feel of the application drive whether users perceive it as high quality.

The opening animation can also give a good first impression by setting up the application’s scene. Popular in many current applications, a snappy opening animation can draw users in, sometimes without even realizing it.

While there is already an official process for creating animations in Flutter to introduce dynamic prologue to the application, the official process does have some disadvantages to consider.

  • When created for iOS, you must create an iOS storyboard to animate the opening of the application.
  • When created for Android, you must write platform-specific code for Android
  • There is no support for web development yet

Fortunately, Flutter has a powerful set of animation options, so we can create a fairly compelling opening animation with code that can be reused across multiple platforms and support networking.

To demonstrate this, we will create a dynamic opening screen for a food ordering application called “Chowtime “. When users open the app, the first thing they see is the native Flutter prologue, which looks like this.

You can also see this demo in your browser. So, let’s get started!

Planning introduction

We must take these aspects into account when designing our opening remarks.

  1. Add a large element that matches the app’s icon, which we can display immediately upon startup
  2. How do we combine this big element with the rest of our opening screen, including the name of the application
  3. Displays a quick animation before navigating to the application’s main screen
  4. Add animation between each of the previous elements to create a sense of quality

Let’s look at how we create these elements.

Create an opening splash screen in Flutter

To create an image that will be displayed immediately after opening the application, we can use a graphical editing tool, such as GIMP, to create a 512×512 image for our opening ceremony. In our example, we’ll just use the letter “C” on a green background.

If you pursue similar concepts in your application, you can (and should) use Google Fonts to find the best font for your application, because Flutter has a Google_fonts package, so you can easily use their fonts in Flutter applications.

After selecting the font, load it into an image editor and play with the colors until you have the palette of font and background colors you want.

You can also use the dropper tool to select specific colors. Note the hexadecimal code for the color; By using hexadecimal code, you can add this exact color to Flutter, preceded by 0xFF. Therefore, if the Color of Flutter is 9AE79A, the corresponding code for Flutter is Color(0xFF9ae79a).

Adds a picture to the splash screen

First, add the Flutter_native_splash package to the project, which allows us to create native splash screens for Android, iOS, and the Web.

Save the launcher image in assets/newlogo.png. Then we must tell Flutter_native_splash what image and background color to use in the rest of the available space. To do this, open pubspec.yaml and add the following lines.

flutter_native_splash:
  color: "#9ae79a"
  image: assets/newlogo.png

Copy the code

The colors here are exactly the same as we get from the color picker in GIMP, which means there is no prefix of 0xFF. This is because the color of the boot screen contains no alpha channel and has no transparency, while the prefix 0xFF defines the transparency of the color.

Now, let’s generate all of our cross-platform startup screens based on this image by running the following command at the root of the project.

flutter pub get
flutter pub run flutter_native_splash:create

Copy the code

With this code in place, the application should open with the image we created. However, it will suddenly change to an open screen for the application. So how do we relate our newly created splash screen to the rest of our startup screen?

Associate the startup screen with our splash screen

Looking at the finished animation at the beginning of this article, we can see that the letter “C “becomes smaller, shortly after revealing the rest of the logo, followed by a short animation of food falling into a bowl.

Often these types of animations can become quite complex, so how can we achieve this efficiently and easily? In this case, we will use an implicit animation.

First, we must specify the object we want to animate; In this case, animate the letter “C “to the extended “CHOWTIME” logo and resize the text. When the text is resized, we also have to increase the middle object boundary of the widget to include the rest of the marker text.

Doing so gives the displayed logo a wipe effect. To implement these animated changes, we will use two widgets: AnimatedDefaultTextStyle and AnimatedCrossFade.

AnimatedDefaultTextStyleThe widget

To resize the text over time, we use the AnimatedDefaultTextStyle gadget. As with most of the panels prefixed by Animated, we had to specify a target size. When the widget size changes, Flutter automatically adjusts our text size within a defined time. In this case, it looks something like this.

AnimatedDefaultTextStyle( duration: transitionDuration, //a duration, set to one second curve: Curves.fastOutSlowIn, style: TextStyle( color: Color(0xFF4e954e), // our color from above, prefixed with 0xFF fontSize: ! expanded ? _bigFontSize : 50, // change font size depending on expanded state fontFamily: 'Montserrat', // the font from Google Fonts fontWeight: FontWeight.w600, // ), child: Text( "C", ), )Copy the code

When expanded Boolean switches and setState is called, widgets are free to animate large to small size changes. Very good.

AnimatedCrossFadeThe widget

Now that the “C “animation is correct, we want to display the rest of our logo when the text is resized. To do this, we’ll do a gradient between an empty Container and a Row that contains our logo text and our animation.

AnimatedCrossFade( firstCurve: Curves.fastOutSlowIn, // the same curve as above crossFadeState: ! expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond, duration: transitionDuration, // the same duration as above firstChild: Container(), // an empty container secondChild: _logoRemainder(), // a Row containing rest of our logo alignment: Alignment.centerLeft, // "reveal" the logo from the center left sizeCurve: Curves.easeInOut, ),Copy the code

Also, as expanded Boolean values are switched, the widget animates between an empty box and the rest of the flag, resizing the container as needed.

Add food animations to Flutter

Now that our logo can be resized appropriately, we can find an animation that best represents the services our application provides. When adding animations, we can create our own animations or download a pre-made animation from Lottiefiles.com; For efficiency, we will use prefabricated animations.

When looking for animations, it’s best to choose an animation that lasts at most two to three seconds, starts with an empty canvas, and has a transparent background.

The food animation meets our standards and is consistent with the application’s services, so download the Lottie animation file as.json and pop it into our Assets folder, Pubspec.yaml.

Again, in the root folder of the application, run the following command to install Lottie in our project.

flutter pub add lottie

Copy the code

There are a few things to keep in mind when adding animations to our opening screen.

  1. Set a width and height, otherwise the animation will be too large
  2. Set up aAnimationControllerTo redirect to the application’s home page when the animation ends.

Our LottieBuilder.asset widget looks something like this.

LottieBuilder.asset( 'assets/food.json', onLoaded: (composition) { _lottieAnimation.. duration = composition.duration; // set the duration of our AnimationController to the length of the lottie animation }, frameRate: FrameRate.max, // makes the animation smoother repeat: false, animate: false, // don't start the animation immediately height: 100, width: 100, controller: _lottieAnimation, )Copy the code

Set animation time

The only thing to do now is to add the appropriate time to the animation by implementing the following duration.

  • Displays the initial splash for one second
  • willexpandedChange to true and callsetStateTo run both the recessive animation and the cross-fade.
  • Wait for text resizing and cross gradient to complete
  • Start the food bowl animation
  • Redirect the user to the home screen

Programmatically, it looks something like this.

Future.delayed(Duration(seconds: 1))
    .then((value) => setState(() => expanded = true))
    .then((value) => Duration(seconds: 1))
    .then(
      (value) => Future.delayed(Duration(seconds: 1)).then(
        (value) => _lottieAnimation.forward().then(
              (value) => Navigator.of(context)
                  .pushAndRemoveUntil(MaterialPageRoute(builder: (context) => HomePage()), (route) => false),
            ),
      ),
    );

Copy the code

This is it! We now have a fully animated splash screen of the app, which is available on iOS, Android and the Web, and will animate when we open it.

Finishing touches

It is fairly easy to create a visually appealing launch screen for users using Flutter’s built-in animation tools. With Flutter’s Flutter_native_splash support, we don’t need to write our animations for use on every platform for our application.

You can find the full source code for the sample application here, and you can split it and have fun. Happy hacking!

The postHow to make a splash screen in Flutterappeared first onLogRocket Blog.