Flutter的AnimatedContainer实现容器样式的动画切换

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 网易云【玩转大前端】配套课程
• EDU配套 教程
• Flutter开发的点滴积累系列文章

AnimatedContainer可以理解为Container Animat，也就是说带动画的容器，使用AnimatedContainer可以很方便的实现Widget的动画效果。

如下图所示的效果，默认情况下图片是一个正方形展示效果，当点击图片后，图片的宽度与高度由原来的100在1秒时间内过渡到200像素，并且变为圆形。

上图所示的效果过程就可以通过AnimatedContainer来轻松的实现，代码如下：

///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ClipRectPageState();
  }
}

class ClipRectPageState extends State {
  ///点击标识
  bool click = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("AnimatedContainer基本使用"),
      ),
      body: Center(
        ///手势识别
        child: GestureDetector(
          onTap: () {
            setState(() {
              click = !click;
            });
          },
          ///动画容器
          child: AnimatedContainer(
            ///动画插值器
            curve: Curves.bounceInOut,
            ///容器的高度
            height: click ? 200 : 100,
            ///容器的宽度
            width: click ? 200 : 100,
            ///容器的装饰
            decoration: BoxDecoration(
              ///背景图片
                image: DecorationImage(
                  ///加载资源目录下的图片
                  image: AssetImage('assets/images/2.0x/banner4.webp'),
                  fit: BoxFit.cover,
                ),
                ///圆角
                borderRadius: BorderRadius.all(Radius.circular(
                  click ? 200 : 0,
                ))),
            ///过渡时间
            duration: Duration(milliseconds: 15000),
          ),
        ),
      ),
    );
  }
}