Beautify your Flutter app using waves π
Add wave animation in your Flutter app and make it more elegant π
We will create a simple widget which will show wave animation. This widget can be wrapped around any other widget to show wave animation behind that.
Let's create base widget
We have to create a skeleton widget which will show the wave animation. It will take Size
, Color
, ChildWidget
as input. We have added TickerProviderStateMixin
as well, this will be used to add animation to our widget.
Now we will create the wave π
We will create a CustomPainter
class to draw wave widget. This CustomPainter
will draw 3 circles at equal distance. This circles will animate to give beautiful wave animations π
We can now add the above CustomPainter
on our created skeleton widget. We also created AnimationController
for the widget. This AnimationController
will be responsible for the animation. For better app performance, we will dispose
the AnimationController
when the widget is disposed.
Its End Game
Let add final widget to complete our animation. We will create a circular widget that will have Gradient
and Scale Animation
to perform the magic πͺ
In the above getAnimatedWidget()
we have added Gradient
for cool looks and ScaleTransition
to change value of animation in wave form. The value goes from 0.95 - 1.0
to change the position of the wave. The CurveWave
helps in archiving wave like transition. At last, we added thegetAnimatedWidget()
in the center of our initial widget.
Now it's time for magic πͺ
Let add the above created widget and create animation. The possibilities are endless β‘οΈ
π The final codeβ¦
Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!π
I am an mobile enthusiast π±. My expertise is in Flutter and Android development, with more than 5 years of experience in the industry.
I would love to write technical blogs for you. Writing blogs and helping people is what I crave for π .You can contact me at my email(abdulrehman0796@gmail.com) for any collaboration π