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