If you want to give smooth & natural experience to the user than animation is the best way. When we want to develop animation which is complex, We need to gather good knowledge of fundamentals of animation which might take time.
But, If we are new in flutter that this much knowledge gathering might take some time, so we will be using package from package manager for the Dart programming language pub.dev, which is AnimatedWidget.
AnimatedWidget
AnimatedWidget package provides simple widgets with there tween constructors to perform animation regarding Translation, Opacity, Rotation, Scaling and Size change.
We prefer this package over default package provided by flutter team, which are Tween animation & Animation controllers because to control complex animation, we require AnimationController’s and as number of widgets on screen increase so does the AnimationController.
To avoid the complexity we will be working with the tween contractor of AnimatedWidget.
What we want to achieve card server and flip animation as shown below.
We are using Flame & Sizer Packer as well to optimized our code.
To learn this, first we will look into basic animation and how they works.
Animations
To perform animations we are passing a bool value to tween contractor and according to the value we had passed to Enabled & Disabled property animation will be handled by AnimatedWidget.
This package is easy to use because we don’t have to deal with the lifecycle of an AnimationController physically.
1. Size change Animation
2. Translation Animation
3. Opacity Animation
4. Rotation Animation
Card Serve Animation:
Now that we have seen how the basic animations works. it’s time to learn how to use 2 or more animations in sync.
1. Card Serve Animation:
To perform card serve animation, we need to combine Size change & Translation Animation.
1. Card Flipping Animation:
To perform card flipping animation, we need to combine Size change & Translation Animation.
Final Animation
If we combine both Serve & Flip animation, we will get following animation.
You can check complete code here.
You can try to create following UI for practice.
