Implicit animations

Why animate?

Good motion explains what is happening: a card expanding shows where more details came from, a button shrinking shows it was pressed, a fade shows content was replaced. Small, quick animations make apps feel polished and help users follow changes. Too much motion distracts and drains battery, so animate with purpose.

Implicit means automatic

An implicit animation widget looks like a normal widget with two extra parameters: duration and curve. Whenever one of its properties changes (for example its width or colour), it animates from the old value to the new one by itself. You never manage timing yourself; you just change state.

class ExpandingCard extends StatefulWidget {
  const ExpandingCard({super.key});
  @override
  State<ExpandingCard> createState() => _ExpandingCardState();
}

class _ExpandingCardState extends State<ExpandingCard> {
  bool _open = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _open = !_open),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        height: _open ? 200 : 80,
        color: _open ? Colors.teal.shade100 : Colors.grey.shade200,
        padding: const EdgeInsets.all(16),
        child: const Text('Today\'s offer: 20% off on all sweets'),
      ),
    );
  }
}

Behind the scenes, an implicit widget remembers the previous value of each property. When it rebuilds with a new value, it starts an internal animation that moves smoothly from the old to the new value over the duration. If the value changes again halfway, it simply continues from wherever it is towards the newest value, so rapid taps never cause jumps.

Because they are just widgets with state inside, implicit animations work with any state management approach: setState, Provider, Riverpod or Bloc. Whatever causes the rebuild with a new value also triggers the animation.

Common implicit widgets

Curves

A curve controls the speed over time. Curves.linear moves at a constant speed, which looks mechanical. Curves.easeInOut starts and ends slowly, which feels natural. Curves.easeOut is good for things entering the screen; Curves.elasticOut and bounceOut are playful, for special moments only. Typical durations are 150 to 400 milliseconds; longer feels slow.

AnimatedSwitcher

AnimatedSwitcher(
  duration: const Duration(milliseconds: 250),
  child: _isLoading
      ? const CircularProgressIndicator(key: ValueKey('loading'))
      : Text('Rs $_total', key: const ValueKey('total')),
)

TweenAnimationBuilder

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: _progress),        // animate up to the new progress value
  duration: const Duration(milliseconds: 600),
  builder: (context, value, child) => LinearProgressIndicator(value: value),
)

Common mistakes

• Changing the value without setState: nothing animates because nothing rebuilds.
• AnimatedSwitcher between two widgets of the same type without different keys: no animation.
• Durations of one or two seconds for small UI changes: the app feels sluggish.
• Animating everything on a screen at once: distracting and expensive.