How to Add Animations and Transitions in Flutter Apps

Animations and transitions are what bring your Flutter apps to life. Instead of showing static screens, you can use animations to make UI changes smoother, guide user interactions, and enhance the overall experience. Flutter makes this easier with built-in animation APIs and pre-built widgets.

In this guide, we’ll cover:

• Why animations matter in apps
• Types of animations in Flutter
• Using Animated Widgets
• Custom animations with the AnimationController
• Adding page transitions

---

1. Why Animations Matter in Flutter Apps

Animations are more than eye candy — they:

• Make navigation feel natural
• Highlight important actions
• Provide feedback to user interactions
• Improve usability and engagement

---

2. Types of Animations in Flutter

Flutter supports two main types of animations:

1. Implicit Animations → Simple, automatic animations with minimal code.
   • Examples: AnimatedContainer, AnimatedOpacity, AnimatedAlign
2. Explicit Animations → Give you full control with an AnimationController.
   • Examples: FadeTransition, ScaleTransition, custom tweens

---

3. Implicit Animations (Beginner-Friendly)

Example: AnimatedContainer

class AnimatedBox extends StatefulWidget {
  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _big = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            _big = !_big;
          });
        },
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
          width: _big ? 200 : 100,
          height: _big ? 200 : 100,
          color: _big ? Colors.blue : Colors.red,
        ),
      ),
    );
  }
}

👉 Tap the box, and it animates smoothly instead of jumping instantly.

---

4. Explicit Animations (More Control)

For advanced cases, use AnimationController with transitions.

Example: Fade + Scale Transition

class FadeScaleDemo extends StatefulWidget {
  @override
  _FadeScaleDemoState createState() => _FadeScaleDemoState();
}

class _FadeScaleDemoState extends State<FadeScaleDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FadeTransition(
        opacity: _animation,
        child: ScaleTransition(
          scale: _animation,
          child: FlutterLogo(size: 150),
        ),
      ),
    );
  }

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

✔ This animates a Flutter logo fading in/out while scaling up/down.

---

5. Page Transitions in Flutter

When switching between screens, you can add custom transitions.

Example: Slide Transition Between Pages

Route createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: Curves.easeInOut));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

👉 Use this when navigating:

Navigator.of(context).push(createRoute());

Now, the new page slides in smoothly instead of popping instantly.

---

6. Best Practices for Animations in Flutter

• 🎨 Keep animations subtle – don’t overuse them.
• ⏱ Use the right curves (easeInOut, bounceOut, etc.).
• ⚡ Optimize performance with Implicit Animations when possible.
• 📱 Always test on different screen sizes and devices.

---

✅ Final Thoughts

Adding animations in Flutter is simple yet powerful. Start with implicit widgets like AnimatedContainer for small effects, then move to explicit animations for full control. Finally, don’t forget to enhance navigation with custom page transitions.

With the right animations, your Flutter app will feel smoother, more professional, and engaging.