flutter 暗黑模式切換過渡動畫實現

• 話不多說，先上效果圖

• 背景

之前專案的暗黑切換過渡，只是單純的背景顏色漸變，程式碼參考如下圖。最近在重寫的過程中，靈光一現，能否實現自上而下的過渡效果。

• 思路

  想要自上而下，說白了元件高度就要從0開始，顏色才能跟著變化。但是總不能初始化為0吧，那樣使用者開啟頁面就是一片空白，再緩緩展示也不太可能。所以我們只能藉助一個虛擬元件來實現。

  利用Stack元件堆疊實現。動畫效果用 AnimatedContainer元件，這個元件封裝好了建立動畫一系列流程，我們只需要改變高度和顏色，就可以自動構建過渡動畫。關鍵程式碼如下。

  Stack(
       fit:StackFit.loose,
       children: [
         AnimatedContainer(
           duration: Duration(seconds: 2),
           curve: Curves.easeInOut,
           height: containerH, // 元件高度，取值0 或 螢幕高度
          color: containerColor, // 元件顏色 即背景顏色
         ),
        // 業務元件
     ）
     ```
  複製程式碼

• 總結

程式碼只是輔助實現，思考才是前進照燈。