Here write the directory title, Flutter Animated 2.7

• AnimatedContainer
• AnimatedOpactiy
• AnimatedAlign

Today is winter solstice, remember to eat dumplings

Ten years time, fleeting. At that time, we were full of loyalty, just in the flowering age, dare to think, dare to do, temper, personality. Although in the so-called darkest stage of life, it is difficult to stop each other’s inner fervent feelings. In a good play, you have to watch it carefully to understand the connection between all things. A good man only needs time to prove that he can see through the goodness of his heart.

Effect of the day:

AnimatedContainer effect:

Rendering (1.1) :

AnimatedOpactiy effect:

Rendering (1.2) :

AnimatedAlign effect:

Rendering (1.3):

AnimatedContainer

Often used in animation by changing x and y values

Bold is a mandatory parameter

Code examples:

  double _width = 50;
  double _height = 50;
  Color _color = new Color(int.parse("0XFF090B30"));
  double radius = 20;

 Widget initAnimatedContainer() {
    return AnimatedContainer(
      padding: EdgeInsets.only(left: 30, top: 40),
      alignment: Alignment.center,
      // Define how long the animation takes
      duration: Duration(milliseconds: 1000),
      // Provide an optional curve to make the animation feel smoother.
      curve: Curves.fastOutSlowIn,
      // Length width uses variables to animate component scaling
      width: _width,
      height: _height,
      child: Text(
        "AnimatedContainer animation",
        style: TextStyle(color: Colors.white, fontSize: 10),
      ),
      decoration: BoxDecoration(
        // The color circle Angle uses a variable
        color: _color,
        border: Border.all(color: Colors.black, width: 2),
        borderRadius: BorderRadius.circular(radius),
      ),
    );
  }
Copy the code

AnimatedContainer button code:

initButton("AnimatedContainer button")

initButton(String s) {
    return ElevatedButton(
      onPressed: () {
          // AnimatedContainer
          buildAnimatedContainer();
      },
      child: Text(s),
    );
  }
  
 List<String> _list = [
    "0XFF3F48CC"."0XFF00A2E8"."0XFF090B30"."0XFFED1C24"."0XFF31B157"."0XFFA349A4"
  ];
  Random random = new Random();
  
void buildAnimatedContainer() {
    _width += 50;
    _height += 100;
    radius += 10;
    _color = new Color(int.parse(_list[random.nextInt(_list.length)]));
    if (_width > 300) {
      _width = 50;
    }
    if (_height > 200) {
      _height = 50;
    }
    if (radius > 50) {
      radius = 10;
    }
    setState(() {});
  }
Copy the code

Analysis:

When clicking on the AnimatedContainer button, make it change by changing the distance of x,y,color, and RADIUS.

Rendering (1.4):

AnimatedOpactiy

  Widget initAnimatedOpactiy() {
    return AnimatedOpacity(
      duration: new Duration(seconds: 2),
      opacity: isOpacity ? 1 : 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.lightGreenAccent,
        child: Text("AnimatedOpcatiy",style: TextStyle(color: Colors.black,fontSize: 10),),),); }Copy the code

initButton("AnimatedOpacity button")

 initButton(String s, int type) {
    return ElevatedButton(
      onPressed: () {
          buildAnimatedOpacity();
      },
      child: Text(s),
    );
  }
  
 bool isOpacity = false;
 
 void buildAnimatedOpacity(){ setState(() { isOpacity = ! isOpacity; }); }Copy the code

AnimatedAlign

Often used for moving animations

Bold is a mandatory parameter

AnimatedAlign code:

  double _x = 0;
  double _y = 0;

 Widget initAnimatedAlign() {
    return Container(
      height: 300,
      color: Colors.red,
      child: AnimatedAlign(
        duration: new Duration(seconds: 2),
        alignment: Alignment(_x, _y),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.cyan,
        ),
      ),
    );
  }
Copy the code

AnimatedAlign button code:

initButton("AnimatedAlign button"),

initButton(String s, int type) {
    return ElevatedButton(
      onPressed: () {
          buildAnimatedAlign();
      },
      child: Text(s),
    );
  }

 void buildAnimatedAlign() {
    _x == 0 ? _x = - 1 : _x = 0;
    _y == 0 ? _y = - 1 : _y = 0;

    setState(() {});
  }
Copy the code

X values in Alignment :(value range (-1 value 1))

• Left-align x = -1
• Center x = 0
• Align x = 1 right

Value of y in Alignment :(value range (-1 value 1))

• Align y = -1
• Center y = 0
• Align y equals 1
  
  

It can be concluded that:

• Align top left 😡 = -1, y = -1
• Align top right: x = 1, y = -1
• Align bottom left: x = -1,y = 1
• Align bottom right 😡 = 1,y = 1
• Center aligned: x = 0, y = 0

Rendering (1.6) :

The complete code