Create an animated screen in Flutter

original

https://medium.com/@baran.aslankan4/create-an-animation-screen-in-flutter-683d9a534d67

code

https://github.com/ducafecat/getx_quick_start

refer to

• https://pub.flutter-io.cn/packages/animated_text_kit
• https://pub.flutter-io.cn/packages/simple_animations
• https://pub.flutter-io.cn/packages/google_fonts

text

Hi everyone, today I'm going to show you how to create an animated screen in Flutter like this;

Install dependencies

You can get dependencies pub.dev

These are the versions I use 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 application called Liquid Studio created by Felix Blaschke that generates dart code to do some animations.

https://felixblaschke.github.io/liquid-studio/#/

Now for the design part:

There are many options and color choices, for this I used the default settings and colors.

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

Click the Add Layer button and choose Plasma.

Now you can customize gradient layers and plasma layers, I made some customizations for myself.

Now to export, click the export button in the upper left corner.

Click Export Scene to export all layers.

Now that we have the code for the color animation, we'll use this code in the IDE, but before that, let's create the class structure.

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

Now, we want to skip the animation page when we tap the screen, to do this we can use the GestureDetector widget.

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

      ),
    );
  }

Now paste the code we exported in liquid studio as a 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 like this, now you'll have an error, it's because we haven't imported the simple animation yet.

Import the simple animation library at the top of the class.

import 'package:simple_animations/simple_animations.dart';

Now that our animated colors are ready to click to navigate another page, we'll use the click method of the GestureDetector widget.

Under the Container Widget, create on tap method and navigate to the desired page.

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

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

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

In this code, the Container widget has a child element, which is the plasma renderer, and the plasma renderer can help us create color animations. Now, in order to add text to the screen, we need to add another child element to the Container Widget. To add child elements, we need to use Stack Widget to cover all child elements.

Click the PlasmaRenderer Widget, then click the lightbulb that appears after clicking the widget.

Select the wrap with Column option.

Now we have to stop here!

Let me tell you why I chose to select with columns, it can also be rows.

We're going to use the Stack Widget, which helps us place Widgets on top of each other, basically stacking Widgets.

But why should I choose columns?

Because the stack, column and row widgets don't have child windows, they have child windows, if I select the widget instead of the column then I will have to create brackets and change the child widget, so the reason I select the column is basically is for faster coding. It's not important at all, but I just wanted to mention

So we've created our stack widget, one of the child widgets is PlasmaRenderer, now we're going to add animated text as a child widget, but before creating the center widget, let's display the text in the center of the screen.

In order to get animated text, we need to use the AnimatedTextKit widget, so we have to import the library.

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

Add this code after PlasmaRenderer.

Got a list called animatedTexts, this list will contain all the text we want to display on the screen.

There are many text animations in the AnimatedTextKit package in pub.dev, I chose to rotate the text, but you can try different animations.

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)),
                  ],

Here RotateAnimatedText takes our string, you can add styles to change font size and boldness, in addition you can import google fonts and add some custom fonts. For the color part, I chose white, you can choose any color you want.

The text is now complete, but we need some customization of the animation timing.

There are a few methods we can use to help us customize our animations.

• totalRepeatCount: You can write the number of times you want the animation to repeat
• pause: pause time between animated texts

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

Write these to the AnimatedTextKit widget.

I want it to execute only once, so I set the repeat count to 1.

Pause takes the Duration method, which I set to 3000 milliseconds, which is 3 seconds.

The whole code should be 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 text according to your taste.

That's all I have for today, thanks for reading, hope you like it, see you next time I write, have a nice day;

---

© Cat Brother

• WeChat ducafecat
• Blog ducafecat.tech
• github
• bilibili