Creating Custom Animations with flutter_animate: A Guide for Flutter Enthusiasts 2024

Muhammad Naeem

Written and reviewed by:

Welcome, Flutter enthusiasts! Today, we’re diving into the exciting world of custom animations using the flutter_animate package.

We’ll explore how to create beautiful animations that will make your apps not just functional but also visually appealing and fun. Grab your cup of coffee, and let’s embark on this animated journey!

Why Animations Matter

Before we get our hands dirty with code, let’s take a moment to understand why animations are crucial in app development.

Animations can significantly enhance the user experience by providing visual feedback, improving navigation, and adding a touch of personality to your app.

They make your app feel alive and interactive, rather than static and unresponsive

Getting Started with flutter_animate

First things first, let’s set up our Flutter project with the flutter_animate package. If you haven’t already, you can add it to your pubspec.yaml file:

				
					dependencies:
  flutter_animate: ^4.5.0

Run flutter pub get to install the package. Now, we’re ready to start animating!

Basic Animation Example of flutter_animate

Let’s kick things off with a simple example. We’ll animate the opacity of a widget to create a fade-in effect.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Animate')),
        body: Center(
          child: Animate(
            child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
          ).fadeIn(duration: Duration(seconds: 2)),
        ),
      ),
    );
  }
}

In this example, the fadeIn method is used to gradually increase the opacity of the text widget over two seconds. It’s a simple yet effective way to introduce animations to your app.

Output:

Custom Animation with flutter _animate

In this example, we are using animate().custom at the end of the animate widget. Here is a required parameter builder that returns a container. We can customize it as our needs

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Animate')),
        body: Center(
          child: Animate(
                child: const Text(
              "Welcome to our App",
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            )).animate().custom(
                duration: 1.seconds,
                begin: 1,
                curve: Curves.easeInOut,
                end: 0,
                builder: (context, value, child) => Container(
                      color: Color.lerp(Colors.red, Colors.blue, value),
                      padding: const EdgeInsets.all(8),
                      child: child,
                    )) ),
      ),
    );
  }
}

Output:

Repeated Animations with flutter_animate

For repeated animation, onPlay function is called under animate(). Here we get a controller, and the logic is “controller.repeat()”.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Animate')),
        body: Center(
          child: Animate(
          child: const Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
        ).animate(onPlay: (controller) => controller.repeat())
            .scaleXY(duration: const Duration(seconds: 2)),
        ),
      ),
    );
  }
}

Output

Animated List using Flutter_animate

For creating an animated list, I took a column widget, and here are 3 text widgets.

Then, in the animate() function, I set an interval of 1000 ms. And the fade-in animation is applied.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Animate')),
        body:Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Welcome",
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  )),
              const Text("to ",
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  )),
              const Text("The Tech Vate",
                  style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 101, 229, 229))),
            ].animate(interval: 1000.ms).fadeIn(duration: 6000.ms),
          ),
      ),
    );
  }
}

Output:

Bonus: Adding Humor to Your Animations

Jiggling Button

Animations don’t just have to be visually appealing; they can also be fun! Imagine an app where buttons jiggle when clicked, or avatars do a little dance when tapped. Here’s a quick example of a jiggling button animation

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Jiggling Button Animation')),
        body: Center(
          child: JigglingButton(),
        ),
      ),
    );
  }
}

class JigglingButton extends StatefulWidget {
  @override
  _JigglingButtonState createState() => _JigglingButtonState();
}

class _JigglingButtonState extends State<JigglingButton> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _animation = Tween<double>(begin: -5.0, end: 5.0).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.elasticIn,
    ));

    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(_animation.value, 0),
          child: ElevatedButton(
            onPressed: () {
              _controller.forward(from: 0);
            },
            child: Text('Click Me'),
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

In this example, we use an AnimationController and a CurvedAnimation to create a jiggling effect. The Transform.translate widget helps to create the jiggle animation of the button. Here we used the Tween Animation where the begining point is -5.0 and the ending point is 5.0.

>> Check out our detailed blog about Flutter animation. In this blog, we discussed Tween Animation.

When the button is clicked, it jiggles from side to side, adding a playful touch to your UI.

Output:

Bouncing Ball:

Here we created a bouncing ball animation using Flutter.

In this example, we use an AnimationController and a CurvedAnimation to create a bouncing effect. The Transform.translate widget shifts the ball up and down based on the animation value, creating a realistic bounce.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bouncing Ball Animation')),
        body: Center(
          child: BouncingBall(),
        ),
      ),
    );
  }
}

class BouncingBall extends StatefulWidget {
  @override
  _BouncingBallState createState() => _BouncingBallState();
}

class _BouncingBallState extends State<BouncingBall> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = CurvedAnimation(parent: _controller, curve: Curves.bounceInOut);

    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, -100 * _animation.value),
          child: child,
        );
      },
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Output:

Remember it!

Creating custom animations with flutter_animate can transform your Flutter apps from ordinary to extraordinary. So, go ahead, experiment with flutter_animate, and let your creativity shine!

Remember, the key to mastering animations is practice and experimentation. Don’t be afraid to try new things and push the boundaries of what’s possible with Flutter. Happy animating!

FAQ

What is flutter_animate?

flutter_animate is a Flutter package designed to simplify the process of creating animations in Flutter applications. It provides a variety of pre-built animations and customization options to enhance your app’s user interface.

What are the basic types of animations I can create with flutter_animate?

With flutter_animate, you can create a variety of animations, such as fade-in, slide, scale, and rotation animations. You can also combine these animations, to create more complex effects.

How can animations improve my app’s user experience?

Animations can make your app more engaging and interactive by providing visual feedback, guiding users’ attention, and adding a touch of personality to the interface. They help create a smooth and enjoyable user experience.

Can I use flutter_animate in both Android and iOS apps?

Yes, flutter_animate is compatible with both Android and iOS platforms, making it a versatile choice for Flutter app development.

Is flutter_animate suitable for beginners?

Absolutely! flutter_animate is designed to be user-friendly, with straightforward methods and options for creating animations. Beginners can start with simple animations and gradually explore more complex ones.

Where can I find more information and examples of flutter_animate?

For more information and examples, you can refer to the official documentation of flutter_animate and explore the Flutter community for tutorials and guides.