Flutter的AnimatedContainer实现容器的装饰效果动画切换

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

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

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

///AnimatedContainer 的基本使用class AnimatedContainerPage extends StatefulWidget { @override State 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), ), ), ), ); }}