Animations can add a delightful touch to your Flutter app, making it more engaging and visually appealing. Often, you might need to incorporate some background animations in your app in order to make your app look more lively and interactive. For this purpose, Flutter provides powerful animation tools that allow developers to create eye-catching background animations easily.
Flutter's animation framework is based on the concept of animation controllers and animation widgets. Animation controllers are used to control the state of an animation, while animation widgets are used to display the animated content on the screen.
Here are the key components of the animation framework:
Animation controller: It's responsible for defining the animation's duration, providing the current animation value, and starting/stopping the animation.
Tween: A Tween is a mapping between a range of values for the animation's beginning and end states.
Animated widget: The animated widget rebuilds itself each time the animation value changes, allowing you to animate any property of a widget.
Let's create a simple example of a background animation using Flutter. In this example, we will animate the background color of the screen to create a smooth color transition effect.
Next, we incorporate the background animations in our main.dart
file, or we can create a separate custom widget to import and use it anywhere else.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: BackgroundAnimationScreen(), ); } } class BackgroundAnimationScreen extends StatefulWidget { @override _BackgroundAnimationScreenState createState() => _BackgroundAnimationScreenState(); } class _BackgroundAnimationScreenState extends State<BackgroundAnimationScreen> with SingleTickerProviderStateMixin { AnimationController _controller; Animation<Color> _colorAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(seconds: 2), vsync: this, ); _colorAnimation = ColorTween( begin: Colors.blue, end: Colors.red, ).animate(_controller); _controller.repeat(reverse: true); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: AnimatedBuilder( animation: _colorAnimation, builder: (context, child) { return Container( color: _colorAnimation.value, child: child, ); }, child: Center( child: Text( 'Educative.io', style: TextStyle( fontSize: 30, color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), ); } }
The main
function is the entry point of the app. It calls the runApp
method to start the Flutter application and pass MyApp
as the root widget.
Lines 4–11: MyApp
is a StatelessWidget that returns a MaterialApp with BackgroundAnimationScreen
as the initial route.
Lines 18–22: BackgroundAnimationScreen
is a StatefulWidget. It represents the main screen of the app, where the background animation will be displayed. _BackgroundAnimationScreenState
is the state class for the BackgroundAnimationScreen
.
SingleTickerProviderStateMixin
is added to provide the animation ticker to the _controller
.
Lines 24–37: In the initState
method, the _controller
is initialized to control the animation. The animation duration is set to 2 seconds, and vsync: this
is provided for better performance.
_colorAnimation
is set up using a ColorTween
to animate the background color from blue to red. The animation is attached to the _controller
.
_controller.repeat(reverse: true)
starts the animation, making it loop continuously between blue and red colors.
Lines 46–68: In the build
method, a Scaffold is created as the root widget, representing the main app screen.
The AnimatedBuilder
widget is used to rebuild the UI whenever the _colorAnimation
updates.
The Container
serves as the background element and its color is set to the current value of _colorAnimation
.
The child
of the AnimatedBuilder
is the Center
widget containing a Text
widget with the text "Educative.io". This text will be displayed at the center of the screen, providing the foreground content.
Free Resources