Learn Implicit and Explicit Animations | Animations and Advanced UI

Flutter provides powerful animation capabilities that help you create engaging and dynamic user interfaces. Animations in Flutter fall into two main categories: implicit and explicit animations.

Understanding the distinction between these types is crucial for choosing the right approach for your UI design.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
            
// main.dart
import 'package:flutter/material.dart';

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

class ImplicitAnimationDemo extends StatefulWidget {
  @override
  _ImplicitAnimationDemoState createState() => _ImplicitAnimationDemoState();
}

class _ImplicitAnimationDemoState extends State<ImplicitAnimationDemo> {
  double _boxSize = 100;
  Color _boxColor = Colors.blue;

  void _changeProperties() {
    setState(() {
      _boxSize = _boxSize == 100 ? 200 : 100;
      _boxColor = _boxColor == Colors.blue ? Colors.orange : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Implicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedContainer(
                width: _boxSize,
                height: _boxSize,
                color: _boxColor,
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _changeProperties,
                child: Text('Animate'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Implicit animations, such as AnimatedContainer, work by automatically animating property changes like width, height, or color. You only update the values, and Flutter handles the timing and interpolation, making them perfect for simple transitions with minimal code.

main.dart


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

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

class ExplicitAnimationDemo extends StatefulWidget {
  @override
  _ExplicitAnimationDemoState createState() => _ExplicitAnimationDemoState();
}

class _ExplicitAnimationDemoState extends State<ExplicitAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller);
  }

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

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Explicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedBuilder(
                animation: _opacityAnimation,
                builder: (context, child) {
                  return Opacity(
                    opacity: _opacityAnimation.value,
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.green,
                    ),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _toggleAnimation,
                child: Text('Fade'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explicit animations use AnimationController and AnimatedBuilder to give full control over timing, direction, and coordination. Use implicit animations for simple property changes with minimal code, and explicit animations when you need precise, custom, or user-driven behavior.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you give examples of implicit and explicit animations in Flutter?

What are some common use cases for each animation type?

How do I decide which animation type to use in my app?

Swipe to show menu

Understanding the distinction between these types is crucial for choosing the right approach for your UI design.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
            
// main.dart
import 'package:flutter/material.dart';

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

class ImplicitAnimationDemo extends StatefulWidget {
  @override
  _ImplicitAnimationDemoState createState() => _ImplicitAnimationDemoState();
}

class _ImplicitAnimationDemoState extends State<ImplicitAnimationDemo> {
  double _boxSize = 100;
  Color _boxColor = Colors.blue;

  void _changeProperties() {
    setState(() {
      _boxSize = _boxSize == 100 ? 200 : 100;
      _boxColor = _boxColor == Colors.blue ? Colors.orange : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Implicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedContainer(
                width: _boxSize,
                height: _boxSize,
                color: _boxColor,
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _changeProperties,
                child: Text('Animate'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

main.dart


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

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

class ExplicitAnimationDemo extends StatefulWidget {
  @override
  _ExplicitAnimationDemoState createState() => _ExplicitAnimationDemoState();
}

class _ExplicitAnimationDemoState extends State<ExplicitAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller);
  }

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

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Explicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedBuilder(
                animation: _opacityAnimation,
                builder: (context, child) {
                  return Opacity(
                    opacity: _opacityAnimation.value,
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.green,
                    ),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _toggleAnimation,
                child: Text('Fade'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1