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

• 話很少說，先上效果圖

• 背景

以前項目的暗黑切換過渡，只是單純的背景顏色漸變，代碼參考以下圖。最近在重寫的過程當中，靈光一現，可否實現自上而下的過渡效果。

• 思路

  想要自上而下，說白了組件高度就要從0開始，顏色才能跟着變化。可是總不能初始化爲0吧，那樣用戶打開頁面就是一片空白，再緩緩展現也不太可能。因此咱們只能藉助一個虛擬組件來實現。

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

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

• 總結

代碼只是輔助實現，思考纔是前進照燈。