• Without further ado, let’s start with the renderings

  • background

The dark switching transition of the previous project was just a simple background color gradient, and the code is shown in the following figure. Recently, in the process of rewriting, I realized whether the transition effect can be realized from top to bottom.

  • Train of thought

    To go from top to bottom, the component height has to start at zero in order for the color to change. But you can’t initialize it to zero, because if the user opens the page, it will be blank, and then it won’t be possible to display it slowly. So we can only do this with a virtual component.

    Use the Stack component Stack implementation. The animation uses the AnimatedContainer component, which encapsulates the process of creating the animation. We can automatically build the transition animation by changing the height and color. The key code is as follows.

    Stack( fit:StackFit.loose, children: [ AnimatedContainer( duration: Duration(seconds: 2), curve: EaseInOut, height: containerH, // Component height, 0 or screen height color: containerColor, // component color (background color), // business component) ' 'Copy the code

  • conclusion

The code is just auxiliary implementation, thinking is the forward light.