Hi all, in this article, we’ll practice how to make a simple animation in Flutter from scratch. I’ll make a milky way contains starry sky with some planets, and when touching on any planet, it will start another screen with the planet circular rotation and satellite surround. The stars twinkle, the sky change background color and more…Now let’s do it!
Analysis
First, we need to clarify how many animation and object will apply on these screens.
As you can see:
- First, we have many stars with a twinkle, so we need an opacity (for turn on and off the light of star), resize (to make it seem sometimes far, sometimes near you) and rotate(the angle of the star) animation to do it.
- Second, the planets appear in order with fade in, so we need two animations the same at stars above (opacity, resize), but different about time to start the effect and don’t repeat these animations.
- Third, the background with color shift, so we need the color tween animation in here.
- Fourth, on the second screen, we have the planet circular rotation and the satellite surround, so I make a rotate animation and create a class to handle the satellite.
- Finally, we got three indicator bars with the beautiful light shift in order, just give it a color tween and use LinearGradient to deal with it.
Note: you always can set speed animation by set timeDilation on build function (1.0 = original speed).
Getting Started
- Random the stars
To make stars random position in the screen, we make a class Star and measure the width and height screen to limit the position (so all stars will are bounded inside the screen).
2. Create animation and manage its order by the controller
In flutter, a animation is present by Animation class and these objects are managed by AnimationController.
Example:
A CurvedAnimation with Interval help to set when animation will start and when will end during the controller running. The controller can play multiple animations with flexible time.
3. Handling hero animation
Flying an image from one screen to another is called a hero animation in Flutter
To do this, we use Hero widget and just notice about the tag attribute have to set the same value in current screen and next screen.
4. Circular rotation planet and sattelite
With satellite, we make an RadialSeekBarPainter class to deal with it
With tab indicator, we add and LinearGradient to handle the color
Summary
Now we’ve already done the main things to make simple milky way animation.
Source code:
