Flutter animation components a: AnimatedContainer

Flutter series overall directory

At first I thought AnimatedContainer assembly may be provided directly to two boundary values, calling on it to start the animation, actually not the case, AnimatedContainer and other containers controls, set the various properties, when we change the value of its properties by setState when the animation will appear directly on the code:

import 'package:flutter/material.dart';

///
/// des:
/// [@author]：
/// [@date]： 2019-04-30 10:06
///
class AnimatedContainerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimatedContainerDemo();
}

class _AnimatedContainerDemo extends State<AnimatedContainerDemo> {
  double _height = 100;
  Color _color = Colors.red;

  _changeValue() {
    setState(() {
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.red ? Colors.blue : Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AnimatedContainer(
          color: _color,
          width: 200,
          height: _height,
          curve: Curves.elasticIn,
          duration: Duration(seconds: 1),
        ),
        RaisedButton(
          child: Text('动画'),
          onPressed: _changeValue,
        ),
      ],
    );
  }
}

Click the button to change by setState AnimatedContainer width, height, color and other information, this change is not change immediately, but there is a one second of animation.

Here is AnimatedContainer property description:

Attributes	Explanation
alignment	Alignment
padding 、margin	padding 、margin
color	colour
decoration	Look here: https://blog.csdn.net/mengks1987/article/details/84856456#2BoxDecoration_25
foregroundDecoration	With decoration, except that represents a pre-foregroundDecoration
width、height	width、height
child	Sub-elements
curve	Curve animation execution, the default is a linear, Curves can see the concrete source code, a variety of curves, such as acceleration, deceleration, etc.
duration	duration