Flutter Animation : Intro
We only use the basics of Flutter and never use it to it’s full potential. In this Flutter Animation Series, we will learn how to use the the hidden power of Flutter in the simplest of ways.
If we look at most apps Made with Flutter on the stores we’ll notice that they’re all look like this (Below):
I’m not saying these kind of are not good, but they’re just basic.. The only apps that actually uses the power of Flutter are Reflectly & Hamilton.
So what is the secret..
3 Ingredient of a great looking app
1. Stack & Positioned
This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.
2. Transform
Translate, Rotate, Scale or use Matrix4 to position or animate your widget as you like
3. AnimationController
This class lets you perform tasks such as:
- Play an animation forward or in reverse, or stop an animation.
- Set the animation to a specific value.
- Define the upperBound and lowerBound values of an animation.
- Create a fling animation effect using a physics simulation.
By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. The animation controller generates a new value whenever the device running your app is ready to display a new frame (typically, this rate is around 60 values per second).
You only need these classes to make a great looking Flutter applications.
I will talk extensively with examples of how to make your app better.
We will learn how to make this simple animation in part 1 of the series.
If you find anything wrong, please mention it in the comment!
Show you’re support by clapping!👏 You can do it as many as 50 times!!
Hi! I’m Ayham Orfali a mobile developer & designer. Connect with me on Linkedin or drop an email to orfali.ayham@gmail.com.
