Change Background Color of Container Using Animation in Flutter

AnimationController is the class which let us perform animations in flutter. The AnimationController is like a controller for animation to perform various functionality on animation. We would also use the AnimatedBuilder widget to perform the animation. With the combination of AnimationController and AnimatedBuilder we would perform very smooth backgroud animation for complete application screen. So in this tutorial we would learn about Change Background Color of Container Using Animation in Flutter Android iOS app.

Live screenshot of App:

Contents in this project Change Background Color of Container Using Animation in Flutter:

1. Open your project’s main.dart file and import material.dart package.

2. Create void main runApp() method and here we would call our main MyApp class.

3. Creating our main MyApp extends StatelessWidget. In this class we would call the MainApp() class.

4. Creating MainApp extends StatefulWidget class. In the class we would make the MainAppState with createState() method to enable the mutable state management in given class.

5. Creating our main child class MainAppState extends State<MainApp> with SingleTickerProviderStateMixin. The SingleTickerProviderStateMixin class is used to provide the single tick to use the single AnimationController object in given class tree.

6. Creating a object variable of AnimationController named as animationController.

7. Creating initState() method to start the background animation on app start time. We would also make the animation repeated. The duration is the time in which the animation will be completed.

8. Creating a array or list of background colors using Animatable<Color> background = TweenSequence<Color>. Here we would define all the colors in which we would use for the animation.

9. Creating Widget Build area -> AnimatedBuilder -> and pass the animation prop value to animationController. This would enable the animation on current AnimatedBuilder widget.

10. Complete source code for main.dart file:

Screenshot:

Change Background Color of Container Using Animation in Flutter

Leave a Reply

Your email address will not be published.