Just My Life & My Work

[Flutter] AnimatedContainer Widget

我們時常要變更介面,希望有平滑的轉場效果,此時可以使用 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 

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: