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, ChildWidgetas 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 👋
