Flutter Animations: How to Create Beautiful Animations in Your App

Are you tired of seeing boring, static screens in your mobile apps? Have you ever wondered how to add some life and excitement to your app? Well, it's time to explore the magic of Flutter Animations!

Flutter Animations is a powerful tool that allows you to create engaging, dynamic and interactive animations in your app. With Flutter Animations, you can make your app come to life by adding motion to your user interfaces, transitions between screens, and even simple yet delightful effects like bounces, fade-ins, and pop-ups.

But the magic of Flutter Animations goes beyond just making your app visually appealing. Animations can also help improve the user experience by providing visual cues, feedback, and guiding the user through the app's logical flow. A well-designed animation can make the difference between a good app and a great app.

So, let's get started with Flutter Animations!

Basic Concepts of Animations

Before we dive into the nitty-gritty of Flutter Animations, let's go over some basic concepts that you need to understand to create animations in your app.

Animation Controller

An Animation Controller is the core component that controls the animation's behavior, such as how long the animation runs, how fast or slow it happens, and how it transitions between various states. You can think of an Animation Controller as a conductor that sets the tempo and rhythm of your animation.

To create an Animation Controller in Flutter, you need to define its duration, forward and backward movements, and animation curve. Once you have set up the Animation Controller, you can attach it to specific animations and trigger it accordingly.

Animation Builder

An Animation Builder is a widget that allows you to define how to build your animation. It provides a flexible framework where you can customize, tweak, and modify your animation as per your app's requirements. An Animation Builder widget is the ultimate tool that you can use to bring your ideas to life.

With the help of an Animation Builder widget, you can create various types of animations, such as Rotation Transition, Fade-in/out, Zoom-in/out, and many more. You can also define the start and end states of your animations, set the animation's duration and curve, and apply them to specific widgets or screens.

Tween

A Tween is simply a range of values that you can interpolate between over time. It defines the start and end values of an animation and provides a smooth transition between the two states. You can think of a Tween as a set of waypoints that your animation controller follows to create a fluid and seamless animation.

A Tween can be used to animate anything from numeric values like opacity and size to visual properties like colors and shapes. You can also stack multiple Tweens together to create complex animations that involve multiple properties.

Curves

Curves are predefined mathematical functions that define how an animation changes over time. They can be useful for creating more natural and organic animation movements that mimic real-world physics. Flutter provides a wide range of Curves that you can use, such as Ease-in-out, Bounce, Elastic, and many more.

How to Create Animations in Flutter

Now that you understand the basic concepts of Animations let's move on to creating some amazing animations in Flutter!

Creating a Flutter Animation

To create an animation in Flutter, you need to follow a three-step process:

1. Create an Animation Controller: Define the duration, movements, and curve of your animation.

2. Define the Tween: Define a range of values to interpolate between, such as start and end values of an animation.

3. Apply the Animation: Apply the Tween to a specific widget or screen using an Animation Builder widget.

Let's take a closer look at each of these steps.

Step 1: Create an Animation Controller

The first step is to create an Animation Controller. You can do this by defining a controller and passing in the duration, forward, and backward movements of your animation. Here's an example code snippet that creates an Animation Controller:

AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
)..repeat();

This code block creates an Animation Controller that lasts for 2 seconds and repeats indefinitely.

Step 2: Define the Tween

The second step is to define the range of values to interpolate between. You can create a Tween object that takes the starting and ending values of your animation properties. For example, here's a code snippet that creates a Tween for animating an image's opacity:

final _opacityTween = Tween<double>(
  begin: 0.0,
  end: 1.0,
);

Step 3: Apply the Animation

The third and final step is to apply the Tween to a specific widget or screen using an Animation Builder. An Animation Builder is a widget that provides a flexible framework where you can customize your animation.

Here's an example code snippet that applies the Tween to a specific widget using an Animation Builder:

AnimationBuilder(
  animation: _controller,
  builder: (BuildContext context, Widget child) {
     return Opacity(
        opacity: _opacityTween.evaluate(animation),
        child: child
      );
  },
  child: Image.asset('assets/images/logo.png'),
)

This code block applies the Tween to the Opacity of an image widget using Tween's evaluate() method.

With these three steps, you have successfully created an Animation in Flutter!

Types of Animations in Flutter

Flutter provides various types of animations that you can use to create beautiful and engaging UI in your app. Here are some of the most common types of animations that you can use:

Rotation Transition Animation

A Rotation Transition Animation rotates a widget as it transitions from one state to another. The Rotation Transition Animation widget takes the child widget you want to animate as an argument and rotates it by a given angle.

class RotationTransitionAnimation extends StatefulWidget {
  final Widget child;
  final bool infiniteRotation;
  final Duration rotationDuration;

  RotationTransitionAnimation({
    required this.child,
    this.infiniteRotation = true,
    this.rotationDuration = const Duration(milliseconds: 500),
  });

  _RotationTransitionAnimationState createState() => _RotationTransitionAnimationState();
}

class _RotationTransitionAnimationState extends State<RotationTransitionAnimation>
    with SingleTickerProviderStateMixin {
  
  late final AnimationController _controller = AnimationController(
    duration: widget.rotationDuration,
    vsync: this,
  )..repeat(reverse: true);
  
  @override
  void initState() {
    super.initState();
    if (!widget.infiniteRotation) {
      _controller.forward();
    }
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
      child: widget.child,
    );
  }
}

Cross-Fade Animation

A Cross-Fade Animation smoothly fades one widget out while fading another in. To create a Cross-Fade Animation, you need to define two child widgets and use the AnimatedSwitcher widget to transition between the two widgets.

class CrossFadeAnimationWidget extends StatefulWidget {
  _CrossFadeAnimationState createState() => _CrossFadeAnimationState();
}

class _CrossFadeAnimationState extends State<CrossFadeAnimationWidget> {
  bool _showFirst = true;

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _showFirst = !_showFirst;
        });
      },
      child: AnimatedSwitcher(
        duration: Duration(milliseconds: 500),
        child: _showFirst ? Container(
          key: ValueKey("First-Container"),
          color: Colors.blue,
          height: 200,
          width: 200
        ) : Container(
          key: ValueKey("Second-Container"),
          color: Colors.red,
          height: 200,
          width: 200
        ),
        transitionBuilder: (Widget child, Animation<double> animation) {
          return FadeTransition(
            opacity: animation,
            child: ScaleTransition(child: child, scale: animation)
          );
        },
      ),
    );
  }
}

Animated List View

An Animated List View animates the addition, deletion, and movement of its child widgets. You can create an Animated List View by using a ListView widget coupled with an AnimationController and an AnimationBuilder.

class AnimatedListViewWidget extends StatefulWidget {
  _AnimatedListViewState createState() => _AnimatedListViewState();
}

class _AnimatedListViewState extends State<AnimatedListViewWidget> {
  final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();
  late final listItems = [
    "Biking",
    "Hiking",
    "Swimming",
    "Running",
  ];
  late final AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
  }

  void _insertSingleItem(String item) {
    listItems.add(item);
    listKey.currentState!.insertItem(listItems.length - 1);
  }

  void _removeSingleItem(String item) {
    int index = listItems.indexOf(item);
    listKey.currentState!.removeItem(
        index, (BuildContext context, Animation<double> animation) {
      return ListTile(
        title: Text(
          item,
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
        ),
        trailing: IconButton(
          icon: Icon(Icons.delete),
          onPressed: () {
            _removeSingleItem(item);
          },
        ),
      );
    });
    listItems.removeAt(index);
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      _buildListView(),
      ElevatedButton(
          onPressed: () {
            _insertSingleItem("Cycling");
          },
          child: Text("Add Item")),
    ]);
  }

  Widget _buildListView() {
    return AnimatedList(
      key: listKey,
      initialItemCount: listItems.length,
      itemBuilder: (context, index, animation) {
        return _getListTile(listItems[index], animation);
      },
    );
  }

  Widget _getListTile(String item, Animation<double> animation) {
    return FadeTransition(
      opacity: animation,
      child: ListTile(
          title: Text(
            item,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
          ),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              _removeSingleItem(item);
            },
          )),
    );
  }
}

Conclusion

Flutter Animations is a powerful tool that you can use to create beautiful and engaging UI in your app. With Flutter Animations, you can add motion, transitions, and effects to your screens, making your app more dynamic and interactive. You learned about the basic concepts of Animations, how to create different types of animations, and went through a step-by-step guide on how to create an animation in Flutter. You're now ready to take your app to the next level with Flutter Animations!

Editor Recommended Sites