Just My Life & My Work

[Flutter] AnimatedContainer Widget

2022 年 02 月 16 日

我們時常要變更介面，希望有平滑的轉場效果，此時可以使用 AnimatedContainer Widget。

過去我們都會使用 Container，現在只要將它替換為 AnimatedContainer Widget，即可做出華麗的漸變過程。

此為最初的狀態。

來看一下程式碼可以怎麼寫：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          decoration: BoxDecoration(
            color: selected ? Colors.yellow : Colors.green,
            borderRadius: BorderRadius.all(
              Radius.circular(12.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.blue,
                offset: Offset(selected ? 10 : 5, selected ? 5 : -10),
              ),
            ],
          ),
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          alignment:
          selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: FlutterLogo(size: selected ? 75 : 150),
        ),
      ),
    );
  }
}

我使用 GestureDetector 來接收點擊，藉此變化兩種介面的設定。

由程式碼所見，在 AnimatedContainer 裡有子 Widget，也都會跟著變化呢～

直接跑程式碼，來持續點擊來看漸變過程，期間設定為 2 秒，看著看著，就被療癒了。🤠

參考：

AnimatedContainer class 

分類：

Flutter, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲