How to create background animations in Flutter

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 animations

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.

Creating a background animation in Flutter

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.

Implement the background animation

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,
            ),
          ),
        ),
      ),
    );
  }
}

Using AnimatedBottomNavigationBar in our app

Code explanation

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