Instagram Gradient Animation for Flutter
Add Instagram login gradient animation to your app.
Do you want to add Instagram-like color gradient animation to your Flutter app? Wait no more!
In this article, we will implement beautiful color gradient animation and make our app more engaging. We will create a simple Utility method that will animate our widget with this beautiful gradients animation.
Setup Constants
Let’s define some constants which we will use in the animation. Foremost, let’s create a list of Color which will be shuffled to get random colors.
We will also create a list of Alignment. These alignments will be used to set the orientation of gradients. This list will give us random values, so we will get different animations in every cycle. Cool, right? Here’s the code:
Start Animation Timer
We will create a Timer with five-second intervals. Every five seconds, we will update the UI of the widget. On updating the widget state, a new gradient will be drawn, and we will see smooth gradient animation.
We will also store the counter for the interval, this will be used to get the correct alignment of the gradient. More about this in the next section. Here’s the code:
Create Gradient Widget
Let’s create a stateful widget, we will use AnimatedContainer as the base widget. This widget will be responsible for a smooth transition from one gradient to the next.
Inside the AnimatedContainer, we will define LinearGradient, and we will use the color list and alignment list created above. We only will fetch alignment opposite to each other, this will allow us to show a symmetrical gradient. To do this, we are using the counter value stored earlier in the Timer method. Using the counter, we will calculate the opposite alignment position.
Let’s Animate It
We will call the startBgColorAnimationTimer() method in the initState of the widget. This will start the animation timer, and we can see the cool gradient animation.
Now you can customize the color and timer duration according to your requirements and enjoy this stunning animation.
The Result
Check out this website build using the same code to show gradient animation:
iCOUNTDOWN
Full Code
Thank you, and I hope this article helped you in some way. If you like this post, please stay tuned for more. Have a nice day!
Want to connect?You can reach me on LinkedIn.
