flutter 暗黑模式切换过渡动画实现

• 话很少说，先上效果图

• 背景

以前项目的暗黑切换过渡，只是单纯的背景颜色渐变，代码参考以下图。最近在重写的过程当中，灵光一现，可否实现自上而下的过渡效果。

• 思路

  想要自上而下，说白了组件高度就要从0开始，颜色才能跟着变化。可是总不能初始化为0吧，那样用户打开页面就是一片空白，再缓缓展现也不太可能。因此咱们只能借助一个虚拟组件来实现。

  利用Stack组件堆叠实现。动画效果用 AnimatedContainer组件，这个组件封装好了建立动画一系列流程，咱们只须要改变高度和颜色，就能够自动构建过渡动画。关键代码以下。

  Stack(
       fit:StackFit.loose,
       children: [
         AnimatedContainer(
           duration: Duration(seconds: 2),
           curve: Curves.easeInOut,
           height: containerH, // 组件高度，取值0 或 屏幕高度
          color: containerColor, // 组件颜色 即背景颜色
         ),
        // 业务组件
     ）
     ```
  复制代码

• 总结

代码只是辅助实现，思考才是前进照灯。