Flutter的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),
          ),
        ),
      ),
    );
  }
}