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

• 话不多说，先上效果图

• 背景

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

• 思路

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

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

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

• 总结

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