Flutter animation collection

You can read this article on my blog

Flutter can easily implement cool animations.

AnimatedContainer

In this control, you can easily add animation to its width,height,color, background color,padding,margin,transform, decoration, etc.

You can do most of your animations very quickly,

Wide high animation

// Mark animation status bool status =true; // Double _height = 100.0; Double _width = 100.0; // The effect is to change the height and width of the control by changing the width value in response to animation processing. As shown in figure 1 void_animating() {
    setState(() {
      if(status) {_height = 100.0; _width = 100.0; }else{_height = 200.0; _width = 200.0; } status = ! status; }); } // This is the widget GestureDetector that handles the click event (// Responds to the click event onTap: _animating, child: AnimatedContainer(// Automatically animates height: animationHeight, width: animationWidth, color: Colors.amber, duration: Duration(milliseconds: 300), child: Container(), ), ),Copy the code

Color animation

// Color _color = color.amber; void_animating() {
    setState(() {// Change the color directlyif (status) {
        _color = Colors.amber;
      } else{ _color = Colors.blue; } status = ! status; }); } GestureDetector( onTap: _animating, child: Center( child: AnimatedContainer( height: _height, width: Color: _color, duration: duration (milliseconds: 300), child: Container(),),),Copy the code

Notice the change in color.

Padding padding

void _animating() {
    setState(() {
      if(status) {_padingValue = 40.0; }else{_padingValue = 30.0; } status = ! status; }); } GestureDetector( onTap: _animating, child: Center( child: AnimatedContainer( height: _height, width: _width, color: Padding-off: EdgeInsets. All (_padingValue), duration: duration (milliseconds: 300), child: Center(// Also to better observe the changes in the inner margins, I added a white widget with a width of 80 inside. Child: Container(width: 80, color: color.white, child: Text("Internal"() (() (() (() (() (Copy the code

You can see that the width of the interior changes because of the padding.

Margin from the outside

 void _animating() {
    setState(() {
      if(status) {_marginValue = 0.0; }else{_marginValue = 30.0; } status = ! status; }); } GestureDetector(onTap: _animating, child: Center) Column( children: <Widget>[ Text("On"),
                    AnimatedContainer(
                      height: _height,
                      width: _width,
                      color: _color,
                      margin: EdgeInsets.all(_marginValue),
                      padding: EdgeInsets.all(_padingValue),
                      duration: Duration(milliseconds: 300),
                      child: Center(
                        child: Container(
                          width: 80,
                          color: Colors.white,
                          child: Text("Internal"),
                        ),
                      ),
                    ),
                    Text("Under"(), [(), (), (Copy the code

Child control alignment

Note that this property applies to the child widgets

  void _animating() {
    setState(() {
      if(status) {// Middle Alignment _alignment = align.center; }else{// bottomRight _alignment = align.bottomright; } status = ! status; }); } GestureDetector(onTap: _animating, child: Center(child: AnimatedContainer) _alignment, height: 300, width: 300, color: _color, duration: Duration(milliseconds: 500), child: Container( width: 80, color: Colors.white, child: Text("Internal"(), ((), ((), (()Copy the code

The inner child control is moved from the middle to the bottom right corner

The transform of transform

This is basically using matrix transformations, like moving positions, zooming in, zooming out, etc. These actions also have dedicated widgets that will be written out later.

void _animating() {
    setState(() {
      if (status) {
        _matrix4 = Matrix4.translationValues(0, 0, 0);
      } else{ _matrix4 = Matrix4.translationValues(20, 50, 0); } status = ! status; }); } GestureDetector( onTap: _animating, child: Center( child: AnimatedContainer( height: 150, width: 150, color: _color, transform: _matrix4, duration: Duration(milliseconds: 500), child: Center( child: Container( width: 50, height: 50, color: Colors.deepOrange, ), ), ), ), ),Copy the code

This shows the change in displacement

However, there are some limitations to the animation operation using transform. For example, the rotation operation cannot specify the center of the rotation. If this operation is implemented, it must rely on the AnimatedBuilder.

The color of the background can not be set at the same time as the color of the outside

GestureDetector(onTap: _animating, child: Center(child: AnimatedContainer(height: 150, width: 150, // decoration: Color: _color, // Change the color and width of the border: border. All (color: status? Colors.cyanAccent : Colors.black, width: status ? 20 : 10)), duration: Duration(milliseconds: 500), child: Center( child: Container( width: 50, height: 50, color: Colors.deepOrange, ), ), ), ), )Copy the code