Create an animation screen in Flutter

Hey everyone, today i am going to show you how to create an animation screen in Flutter like this;

Dependencies

1. Animated Text Kit
2. Simple Animations
3. Google Fonts(Optional)

Installing the Dependencies

You can get the dependencies from pub.dev

These are the versions that i have used in my project:

animated_text_kit: ^4.2.1
simple_animations: ^3.1.1
google_fonts: ^2.1.0

After getting the dependencies, we have one more step before coding.

There is an app called Liquid Studio created by Felix Blaschke, this app generates dart code to make some animations.

Link to the website:

Liquid Studio - Simple Animations

Now the design part:

There are many options and colors to pick, for this i used the default settings and colors.

Now, to animate it we need to add another layer called Plasma.

Click add layer button and select Plasma.

Now you can customize both gradient and plasma layers, i did some customization for myself.

And now to export it click the export button on top left.

Click export scene to export all the layers.

Now we have our code for the color animations, we will use this code in our IDE, but before that let’s create our class structure.

Let’s create a stateful widget and return a Scaffold first.

Now, we want to skip the animation page when we click the screen, to do that we can use GestureDetector Widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        
      ),
    );
  }

Now paste the code that we have exported in liquid studio as the child of the GestureDetector Widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              tileMode: TileMode.mirror,
              begin: Alignment.topRight,
              end: Alignment.bottomRight,
              colors: [
                Color(0xfff44336),
                Color(0xff2196f3),
              ],
              stops: [
                0,
                1,
              ],
            ),
            backgroundBlendMode: BlendMode.srcOver,
          ),
         PlasmaRenderer(
              type: PlasmaType.infinity,
              particles: 10,
              color: Color(0x442eaeaa),
              blur: 0.31,
              size: 1,
              speed: 1.86,
              offset: 0,
              blendMode: BlendMode.plus,
              particleType: ParticleType.atlas,
              variation1: 0,
              variation2: 0,
              variation3: 0,
              rotation: 0,
            ),
        ),
      ),
    );
  }

It should look something like this, now you will have an error that is because we haven’t imported simple animations yet.

Import the simple animations library at the top of your class.

import 'package:simple_animations/simple_animations.dart';

Now our animated colors are ready, to navigate another page on tap we will use on tap method of GestureDetector Widget.

Under the Container Widget, create on tap method and navigate the page you want.

onTap: (){
          Navigator.of(context).pushReplacementNamed('/home');
        },

Now when we test the code it should look like this:

Now only one thing to do left and that is animated text part.

In this code, Container widget has one child and that is plasma renderer, plasma renderer helps us to create color animations. Now to add text to the screen we need to add another child to the Container Widget. To add children we need to cover all the children with Stack Widget.

Click PlasmaRenderer Widget, and click the light bulb that appears after clicking the widget.

Select wrap with Column option.

Now we need to stop here!

Let me tell you why i choose select with column, it can also be row too.

We are going to use Stack Widget, this widget helps us to put widgets on top of each other, it’s basically stacking widgets.

But why did i choose column ?

Because stack, column and row widgets do not have child, they have children, if i chose widget instead of column then i would have to create brackets and change child to children, so the reason why i choose column is basically to code faster. This is not important at all but i just wanted to mention 😛

So have created our Stack Widget and one of it’s children is PlasmaRenderer, now we are going to add animated texts as a children but before let’s create Center Widget to show the texts in the center of the screen.

To get animated texts we need to use AnimatedTextKit Widget thus we have to import the library.

import 'package:animated_text_kit/animated_text_kit.dart';
Center(
          child: AnimatedTextKit(
                ),
              ),

Add this code after PlasmaRenderer.

AnimatedTextKit gets a list called animatedTexts, this list will contain all the texts that we want to show on our screen.

In pub.dev there are many animations for text in AnimatedTextKit package, i chose rotated text but you can try a different one.

animatedTexts: [
                    RotateAnimatedText('Hello',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Animation screen',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Click to get started',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                  ],

In here RotateAnimatedText takes our string, you can add style to change font size and make it bold, additionally you can import google fonts and add some custom fonts. For the color part i chose white color you can choose whatever you want.

Now texts are done but we need some customizations about animation time.

We can use some methods that helps us to customize our animations.

1. totalRepeatCount : You can write how many times you want the animation repeats
2. pause : The pause time between the animated texts

totalRepeatCount: 1,
pause: const Duration(milliseconds: 3000),

Write those inside the AnimatedTextKit Widget.

I want it to perform only once so i set repeat count 1.

pause takes Duration method and i set it 3000 milliseconds which is 3 seconds.

The whole code should look like this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              tileMode: TileMode.mirror,
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xffff1100),
                Color(0xff008eff),
              ],
              stops: [
                0,
                1,
              ],
            ),
            backgroundBlendMode: BlendMode.srcOver,
          ),
          child: Stack(
            children:[
               PlasmaRenderer(
              type: PlasmaType.infinity,
              particles: 10,
              color: Color(0x442eaeaa),
              blur: 0.31,
              size: 1,
              speed: 1.86,
              offset: 0,
              blendMode: BlendMode.plus,
              particleType: ParticleType.atlas,
              variation1: 0,
              variation2: 0,
              variation3: 0,
              rotation: 0,
            ),
              Center(
                child: AnimatedTextKit(
                  animatedTexts: [
                    RotateAnimatedText('Hello',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Animation screen',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Click to get started',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                  ],
                      totalRepeatCount: 1,
                      pause: const Duration(milliseconds: 3000),
                ),
              ),],
          ),
        ),
          onTap: (){
            Navigator.of(context).pushReplacementNamed('/home');
          }
      ),
    );
  }

You can customize your animation and use more methods or more animated texts depending on your taste.

That was all from me today, thanks for reading, hope you liked it, see you on the next writing and have a nice day ;)