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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget. In this class we would call the MainApp() class.
|
1 2 3 4 5 6 7 8 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MainApp(), ); } } |
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.
|
1 2 3 4 |
class MainApp extends StatefulWidget { @override MainAppState createState() => MainAppState(); } |
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.
|
1 2 3 4 5 |
class MainAppState extends State<MainApp> with SingleTickerProviderStateMixin { } |
6. Creating a object variable of AnimationController named as animationController.
|
1 |
AnimationController 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.
|
1 2 3 4 5 6 7 8 |
@override void initState() { super.initState(); animationController = AnimationController( duration: const Duration(seconds: 8), vsync: this, )..repeat(); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Animatable<Color> background = TweenSequence<Color>([ TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.blueAccent, end: Colors.greenAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.greenAccent, end: Colors.pinkAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.pinkAccent, end: Colors.orangeAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.orangeAccent, end: Colors.blueAccent, ), ), ]); |
9. Creating Widget Build area -> AnimatedBuilder -> and pass the animation prop value to animationController. This would enable the animation on current AnimatedBuilder widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Widget build(BuildContext context) { return AnimatedBuilder( animation: animationController, builder: (context, child) { return Scaffold( body: Container( constraints: BoxConstraints.expand(), color: background.evaluate( AlwaysStoppedAnimation(animationController.value)), child: Center( child: Text( 'Background Color Transition with Animation in Flutter', style: TextStyle( color: Colors.white, fontSize: 42, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), )), ); }); } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MainApp(), ); } } class MainApp extends StatefulWidget { @override MainAppState createState() => MainAppState(); } class MainAppState extends State<MainApp> with SingleTickerProviderStateMixin { AnimationController animationController; @override void initState() { super.initState(); animationController = AnimationController( duration: const Duration(seconds: 8), vsync: this, )..repeat(); } Animatable<Color> background = TweenSequence<Color>([ TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.blueAccent, end: Colors.greenAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.greenAccent, end: Colors.pinkAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.pinkAccent, end: Colors.orangeAccent, ), ), TweenSequenceItem( weight: 1.0, tween: ColorTween( begin: Colors.orangeAccent, end: Colors.blueAccent, ), ), ]); @override Widget build(BuildContext context) { return AnimatedBuilder( animation: animationController, builder: (context, child) { return Scaffold( body: Container( constraints: BoxConstraints.expand(), color: background.evaluate( AlwaysStoppedAnimation(animationController.value)), child: Center( child: Text( 'Background Color Transition with Animation in Flutter', style: TextStyle( color: Colors.white, fontSize: 42, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), )), ); }); } } |
Screenshot:
