Most people know about Flutter by now. If not, check out the Website of Flutter

AnimatedContainer

Understanding of Android development should know, in Android to set the control property animation or more trouble, and multiple property animation Settings together is more trouble, to write a lot of lines of code.

In Flutter, animating widgets doesn’t need to be complicated at all. Just use AnimatedContainer.

AnimatedContainer, as the name suggests, is Container + Animat, which is the Container that drives the painting. AnimatedContainer inherits from the ImplicitlyAnimatedWidget. If we open the source code, we can see the comments on the class:

/// An abstract widget for building widgets that gradually change their /// values over a period of time. /// /// Subclasses’ States must provide a way to visit the subclass’s relevant /// fields to animate. [ImplicitlyAnimatedWidget] will then automatically /// interpolate and animate those fields using the provided duration and /// curve when those fields change.

A simple translation is:

This class is used to build a drawing widget that can change its value over time.

The subclass must provide a way to access the relevant fields of the subclass for animation processing, and when these fields change, the ImplicitlyAnimatedWidget will automatically set the animation using the supplied Duration and Curve.

Here’s an example:

To achieve the above effect is very simple, there is no logical code, just need to define several values, random OK.

Start by defining a few variables: color, position, width and height, and subscript:

  var _colors = [
    Colors.red,
    Colors.green,
    Colors.amber,
    Colors.blue,
    Colors.deepPurple
  ];

  var _alignments = [
    Alignment.center,
    Alignment.bottomLeft,
    Alignment.bottomRight,
    Alignment.topRight,
    Alignment.topLeft,
  ];

  double _weight = 400;
  double _height = 400;

  int index = 0;
Copy the code

Then we define a method to call when clicked, randomly changing the value:

next() {
    setState(() {
      if(_weight == 400){
        _weight -= 100;
        _height -= 100;
      }else {
        _weight += 100;
        _height += 100;
      }
      index = Random().nextInt(5);
    });
}
Copy the code

Finally, we write the build method to implement the page:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainerDemo'),
      ),
      body: Center(	// Put the View in the middle
        child: GestureDetector(	// gesture recognition control, used to write click events
          onTap: (){
            setState(() {
              next();
            });
          },
          child: AnimatedContainer(	/ / AnimatedContainer controls
            width: _weight,	// Set the width and height of the variable
            height: _height,
            curve: Curves.fastOutSlowIn,	// Set the interpolation properties
            duration: Duration(milliseconds: 500),	// Set the time
            color: _colors[index],	// Set the color
            alignment: _alignments[index],	// Set the location
            child: Text(
              'A',
              style: TextStyle(color: Colors.white, fontSize: 50),),),),),); }Copy the code

You can see that the code is very simple, just setting up an AnimatedContainer Widget and filling in the properties.

At this point, as noted in the ImplicitlyAnimatedWidget source code, the AnimatedContainer automatically sets the interpolation property to change the value whenever a value changes, and the animation appears.

summary

The AnimatedContainer provided by Flutter makes it easy to animate widgets, making simple animations very convenient. There are many other widgets similar to AnimatedContainer that can be used in a similar way. If you don’t know where to look, please go to the website of Flutter