Romantic Project — How to create the NetFlix logo animation in Flutter

Original

In this article, we would be exploring Flutter animation from scratch. We would learn some core concepts about animation by creating a cover version of the NetFlix logo animation in Flutter.

From Flutter Animations document, Choosing an approach. Yes! You have to imagine in your mind What & How to do … And list them from biggest to smallest.

Solution notes

1. Use CustomPaint to draw “N”.
2. Separate “N” into 3 lines: |(line1) \(line2) |(line3)
3. Draw each line by many sub-lines.
4. Each line is drawn by a gradient color that will change from red to transparency at different speeds.
5. Starting animation by line3.
6. When line3 is at 40%, start line2.
7. When line2 is at 40%, start line1.
8. Line1 starts to change gradient color from red to many colors.
9. When Line1 changed into many colors, start to translate its sub-lines to the left & right sides at different speeds.
10. Wrap “N” CustomPainter with a ScaleTransition, from 1 -> 7, and its duration is total duration of 3 lines. Use TweenSequence to split into 2 phases of scaling, first 80% is slow and then faster.
11. An AnimationControler to control the whole animation.
12. 3 AnimationControllers to control 3 lines.
13. Use CurveTween for each of the sub-animations to make more exciting effects.
14. Use Gradient Shader to draw a sub-line.
15. Use ColorTween to change from red to transparency.
16. Changing stops value of Gradient by AnimationController.value to make line changing effect.

Technical stack

1. Animations (Explicit, Implicit, Low-level).
2. CustomPaint.
3. Basic Algorithm for drawing by Canvas.

SourceCode

romantic_project / flutter_netflix_logo

Yeah! That is my solution to create the NetFlix Logo by basic animations in Flutter. Isn’t it romantic? How about your solution? Feel free to comment below! :D