Flutter AnimatedContainer: Animate Without Controllers

Coding Liquids videos let the curve, duration, and destination values move in real time.

Subscribe on YouTube@codingliquids

Let changed properties tween themselves

ImplicitlyAnimatedWidget subclasses compare old and new property values whenever setState rebuilds them. Flutter creates and advances the internal tweens, so the widget owner declares the destination rather than frame values.

The animation restarts from its current value when another change arrives before completion.

Animate a card with AnimatedContainer

AnimatedContainer can interpolate width, height, alignment, padding, colour, constraints, transform, and BoxDecoration fields. Change those properties from a boolean, supply a duration and Curve, and keep child identity stable during the transition.

Decoration shapes with incompatible types may not interpolate as expected.

class ExpandingCard extends StatefulWidget {
  const ExpandingCard({super.key});
  @override
  State<ExpandingCard> createState() => _ExpandingCardState();
}
class _ExpandingCardState extends State<ExpandingCard> {
  bool expanded = false;
  @override
  Widget build(BuildContext context) => GestureDetector(
    onTap: () => setState(() => expanded = !expanded),
    child: AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeOutCubic,
      width: expanded ? 320 : 180,
      padding: EdgeInsets.all(expanded ? 24 : 12),
      child: Text(expanded ? 'Tap to collapse' : 'Tap to expand'),
    ),
  );
}

Instagram motion studies compare implicit widgets by the property and layout work each one animates.

Follow me on Instagram@sagnikteaches

Reach for the matching implicit widget

AnimatedOpacity fades, AnimatedAlign moves alignment, AnimatedPadding changes insets, and AnimatedDefaultTextStyle interpolates typography. Choosing the narrow widget documents the intended change and avoids rebuilding unrelated container decoration.

Opacity at zero still participates in hit testing unless interaction is disabled separately.

Animate arbitrary numbers with TweenAnimationBuilder

TweenAnimationBuilder accepts a Tween, duration, curve, and builder for values such as progress, angle, or monetary totals. Pass expensive static descendants through child so the builder does not recreate them on every tick.

Flutter takes ownership of the Tween instance, so do not mutate and reuse it elsewhere.

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: completion),
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeOutCubic,
  builder: (context, value, child) => Stack(
    alignment: Alignment.center,
    children: [
      CircularProgressIndicator(value: value),
      Text('${(value * 100).round()}%'),
    ],
  ),
)

Swap content with AnimatedSwitcher

AnimatedSwitcher animates between children whose runtime type or Key changes. Give success, loading, and action children distinct ValueKeys and customise transitionBuilder when the default fade is insufficient.

Two Text widgets with the same type and no different key are treated as an update rather than a switch.

AnimatedSwitcher(
  duration: const Duration(milliseconds: 220),
  transitionBuilder: (child, animation) =>
      ScaleTransition(scale: animation, child: FadeTransition(opacity: animation, child: child)),
  child: isSaving
      ? const CircularProgressIndicator(key: ValueKey('saving'))
      : const Icon(Icons.check, key: ValueKey('saved')),
)

A LinkedIn design note asks when implicit retargeting stops being enough for an interaction.

Connect on LinkedInSagnik Bhattacharya

Move to a controller for choreography

Implicit widgets suit one destination change but do not expose pause, scrub, repeat, status, or coordinated intervals. Use AnimationController when gesture position drives progress or several properties need a shared timeline.

Combining many unrelated implicit durations can make a screen feel unsynchronised.

Choose values that interpolate cleanly

AnimatedContainer animates from its current resolved properties to the new ones whenever it rebuilds with different values. That makes it ideal for a small set of visual states, but it does not define the state machine for you. Store the semantic state, such as selected or expanded, and derive colour, padding, alignment, and decoration from it. Storing every animated number separately makes interrupted transitions and accessibility variants harder to keep coherent.

Not every pair of values has a meaningful interpolation. Switching between incompatible decoration shapes, replacing a child, or moving between constrained and unconstrained dimensions can appear abrupt even though the container is animating. Keep the surrounding layout constraints stable and use AnimatedSwitcher when the child itself changes. If several implicit animations must finish together, give them matching durations and curves or make the deliberate difference visible as part of the design.

Rapid taps retarget an implicit animation from its current visual value, which is normally graceful. Business actions must still be protected from duplicate submission independently of the motion. Use onEnd only for visual follow-up that remains valid if the transition is retargeted; it is a poor place to commit critical data. A widget test can tap, pump part of the duration, assert an intermediate value, finish the pump, and verify the final semantics.

Respect MediaQuery.disableAnimations or the application’s motion preference by shortening or removing non-essential movement while preserving the state change. Large text and narrow constraints may make an animated width clip content, so test the actual labels at increased text scaling. Profile complex decorations on a representative device, especially if shadows, gradients, or clipping repaint across a large area. An implicit animation should clarify the relationship between two states, not make the user wait before the new control becomes operable.

Layout changes can propagate beyond the animated box. Animating height inside a long list may force repeated layout of surrounding children, while a transform can move pixels without changing their allocated space. Choose based on whether neighbouring widgets should actually move. Decorations containing images should be resolved before the transition if a late image decode would cause a visual jump. The completion callback can fire after any retargeted animation reaches its latest destination, so capture current state rather than assuming which tap initiated it. These distinctions matter when the implicit widget graduates from a decorative sample to a reusable control.

A settings disclosure is a useful integration test for implicit motion. The expanded state may change padding, alignment, background, and a help panel at once, yet the form fields must keep their controllers and focus. Derive all visual targets from one expanded value, give replacement children stable keys, and keep validation outside onEnd. Collapse the panel midway through expansion to confirm that retargeting begins from the current visual frame rather than jumping back to its original size.

Parent constraints decide whether the surrounding layout participates. Inside a column, an animated height moves later siblings; inside a stack, a transform may overlap them instead. Test both the intended placement and an accidentally tight constraint, because overflow during intermediate frames may not exist at either endpoint. When the component appears in a scrolling list, preserve its state with a record key and check that recycling does not replay the transition. The completed control should expose the same label, value, focus order, and tap target whether motion runs normally or is disabled.

Common mistakes

• Let changed properties tween themselves: In implicit Flutter animation, the animation restarts from its current value when another change arrives before completion; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.
• Animate a card with AnimatedContainer: In implicit Flutter animation, decoration shapes with incompatible types may not interpolate as expected; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.
• Reach for the matching implicit widget: In implicit Flutter animation, opacity at zero still participates in hit testing unless interaction is disabled separately; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.
• Animate arbitrary numbers with TweenAnimationBuilder: In implicit Flutter animation, flutter takes ownership of the Tween instance, so do not mutate and reuse it elsewhere; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.
• Swap content with AnimatedSwitcher: In implicit Flutter animation, two Text widgets with the same type and no different key are treated as an update rather than a switch; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.
• Move to a controller for choreography: In implicit Flutter animation, combining many unrelated implicit durations can make a screen feel unsynchronised; inspect this implicit Flutter animation cause before changing another implicit Flutter animation widget.

Frequently asked questions

How does let changed properties tween themselves work in implicit Flutter animation?

For implicit Flutter animation, the starting rule is that implicitlyAnimatedWidget subclasses compare old and new property values whenever setState rebuilds them. Apply this implicit Flutter animation rule first because let changed properties tween themselves determines whether the implicit Flutter animation pattern fits.

Why does reach for the matching implicit widget matter for implicit Flutter animation?

In implicit Flutter animation, choosing the narrow widget documents the intended change and avoids rebuilding unrelated container decoration. Keeping reach for the matching implicit widget at the implicit Flutter animation call site exposes the implicit Flutter animation return value directly.

What failure should I test first in implicit Flutter animation?

First reproduce the implicit Flutter animation case where two Text widgets with the same type and no different key are treated as an update rather than a switch. The corrected switch gives the old and new children distinct keys, allowing the transition to represent replacement rather than an in-place text update.

How can I verify implicit Flutter animation before release?

Exercise move to a controller for choreography with real implicit Flutter animation inputs on every shipped platform. Inspect the final implicit Flutter animation callback or output; a successful implicit Flutter animation button tap alone is not proof.

Further reads

Connect implicit Flutter animation to the surrounding Flutter stack through these published tutorials:

• Flutter Development Guide 2026
• Flutter AnimationController and Tween Explained
• Flutter Animations: The Complete Guide With Code Examples
• Flutter Custom Page Route Transitions
• Flutter ThemeData: App-Wide Colours and Typography

Sources: Flutter framework and Dart API documentation; implicit Flutter animation examples verified against current stable Flutter.