Unlock the Power of Animations in Your Flutter App

When it comes to creating a seamless user experience, animations play a vital role. From loading screens to transitions, animations can elevate your app’s overall performance and make it more engaging.

The Two Main Categories of Animation

In mobile apps, animations can be broadly classified into two categories: code-based and drawing-based animations.

Code-Based Animations

Code-based animations focus on animating existing widgets, such as containers, rows, columns, and stacks. They allow you to change the size, scale, position, and more of the widget. For instance, you can move a product image from the shopping list to the cart icon using code-based animations.

Implicit Animations

Implicit animations are a type of code-based animation that is easy to implement. All you need to do is set a new value and call setState to animate the widget to the new value. Implicit animated widgets in Flutter include AnimatedContainer, AnimatedAlign, AnimatedOpacity, and more.

import 'package:flutter/material.dart';

class ImplicitAnimationExample extends StatefulWidget {
  @override
  _ImplicitAnimationExampleState createState() => _ImplicitAnimationExampleState();
}

class _ImplicitAnimationExampleState extends State {
  double _height = 100;

  void _launchRocket() {
    setState(() {
      _height = 200;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedContainer(
          height: _height,
          duration: Duration(milliseconds: 500),
          child: Image.asset('rocket.png'),
        ),
        ElevatedButton(
          onPressed: _launchRocket,
          child: Text('Launch Rocket'),
        ),
      ],
    );
  }
}

Explicit Animations

Explicit animations are another type of code-based animation that gives you more control over the animation. You can use explicit animations when you need an animation to run forever, in reverse order, or when you want to animate multiple widgets in the same manner.

import 'package:flutter/material.dart';

class ExplicitAnimationExample extends StatefulWidget {
  @override
  _ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
}

class _ExplicitAnimationExampleState extends State
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween(begin: 0, end: 200).animate(_controller);
  }

  void _launchRocket() {
    _controller.forward();
  }

  void _abortFlight() {
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              height: _animation.value,
              child: Image.asset('rocket.png'),
            );
          },
        ),
        ElevatedButton(
          onPressed: _launchRocket,
          child: Text('Launch Rocket'),
        ),
        ElevatedButton(
          onPressed: _abortFlight,
          child: Text('Abort Flight'),
        ),
      ],
    );
  }
}

Drawing-Based Animations with Rive

Rive is an animation framework that helps you create stunning visuals for any platform. We’ll demonstrate how to create a simple rocket animation in Rive and integrate it into a Flutter app.

Creating the Animation in Rive

Create a new artboard in Rive, design the rocket, and animate it using keys. Export the Rive file and install it in your Flutter app.

Loading the Rive File

Load the .riv file into the artboard using the RiveAnimationController. Write a widget to show the Rive artboard and trigger the animation using a FloatingActionButton.

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class RiveAnimationExample extends StatefulWidget {
  @override
  _RiveAnimationExampleState createState() => _RiveAnimationExampleState();
}

class _RiveAnimationExampleState extends State {
  late RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = RiveAnimationController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rive Animation Example'),
      ),
      body: Center(
        child: RiveAnimation.asset(
          'assets/rocket.riv',
          fit: BoxFit.contain,
          controllers: [_controller],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.play();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

• Remember to replace ‘rocket.png’ and ‘assets/rocket.riv’ with your actual image and Rive file paths.
• For more information on Rive and its integration with Flutter, refer to the official documentation.