Beautify your Flutter app using waves 🌊

Abdul Rehman
3 min readJul 11, 2022

--

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.

Final Generated Animation πŸ”₯

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 πŸͺ„

Photo by Mulyadi on Unsplash

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 ⚑️

Final Generated Animation πŸ”₯

🏁 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 πŸ‘‹

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Abdul Rehman

Mobile developer in love with Flutter and Android β™₯️