Flutter Animations: A Comprehensive Guide

Animations add life to your Flutter applications, making them more engaging and intuitive. This guide covers implicit animations, explicit animations, and custom animations using AnimationController.

1. Implicit Animations

Implicit animations are the easiest way to add animations to your app. Flutter provides several implicitly animated widgets that automatically animate changes to their properties.

Example: AnimatedContainer

import 'package:flutter/material.dart';

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

class _ImplicitAnimationExampleState extends State<ImplicitAnimationExample> {
  bool _isBig = false;

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

2. Explicit Animations

Explicit animations give you more control over the animation process. They use an AnimationController to drive the animation.

Example: AnimatedBuilder

import 'package:flutter/material.dart';

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

class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return Container(
          width: 200 * _animation.value,
          height: 200 * _animation.value,
          color: Colors.blue,
        );
      },
    );
  }
}

3. Custom Animations with AnimationController

For more complex animations, you can use AnimationController directly.

Example: Custom Animation

import 'package:flutter/material.dart';
import 'dart:math' as math;

class CustomAnimationExample extends StatefulWidget {
  @override
  _CustomAnimationExampleState createState() => _CustomAnimationExampleState();
}

class _CustomAnimationExampleState extends State<CustomAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, child) {
        return Transform.rotate(
          angle: _controller.value * 2 * math.pi,
          child: child,
        );
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.green,
        child: Center(
          child: Text('Rotating!'),
        ),
      ),
    );
  }
}

4. Hero Animations

Hero animations create a visual connection between two screens, making transitions feel smooth and connected.

Example: Hero Animation

import 'package:flutter/material.dart';

class HeroAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion

Animations are a powerful tool in Flutter for creating engaging and intuitive user interfaces. By mastering implicit animations, explicit animations, custom animations with AnimationController, and hero animations, you can create rich, interactive experiences in your Flutter applications.

5.1 KiB Raw Blame History