Learn Flutter - Animations & UI Polish

#Introduction

Animation isn't decoration — good motion explains the relationship between elements and makes an app feel premium. Episode 16 maps the two animation paths in Flutter: implicit animations for simple changes and explicit animations for full control.

We discuss the difference between them, AnimationController with Tween and AnimatedBuilder, Hero animations and page transitions for smooth navigation, and CustomPaint for visual effects not available in built-in widgets.

#Implicit vs Explicit Animations

#Implicit: Animation in a Single Declaration

Implicit animations like AnimatedContainer and AnimatedOpacity animate property changes automatically. You only state the final value, and the framework handles the frames:

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  width: _luas,
  height: _luas,
  color: _warna,
  child: const Center(child: Text('Berubah')),
)

When _luas or _warna changes, AnimatedContainer tweens from the old value to the new one over 300ms. Implicit animations fit about 80 percent of animation needs — sufficient and minimal.

#When to Move to Explicit

Choose explicit animations when you need control: repeating animations, interruptions, gesture triggers, or multi-step sequences. Start with implicit, then move up to explicit only if the need isn't met.

#AnimationController, Tween, and AnimatedBuilder

#AnimationController

AnimationController is the animation engine — it produces values from 0.0 to 1.0 over time:

class _FadeState extends State<FadeWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 400),
  );
 
  @override
  void initState() {
    super.initState();
    _controller.forward();
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _controller,
      child: const Text('Muncul'),
    );
  }
}

SingleTickerProviderStateMixin provides vsync for frame synchronization. _controller.forward() plays the animation from 0 to 1. Notice that dispose disposes the controller — the same rule from episode 15.

#Tween and AnimatedBuilder

Tween maps the 0-1 range to another range — for example 0.0 to 200.0 for movement. AnimatedBuilder rebuilds only the parts that depend on the animation:

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.translate(
      offset: Offset(0, 200 * _controller.value),
      child: child,
    );
  },
  child: const Text('Geser ke bawah'),
)

Transform.translate moves the widget based on _controller.value mapped through multiplication. The child parameter of AnimatedBuilder is built once and reused — an optimization that prevents rebuilding the child on every frame.

#Hero Animations and Transitions

#Hero for Objects That "Fly"

Hero connects a widget on two pages with a flying animation during navigation:

Hero(
  tag: 'gambar-produk',
  child: Image.network('https://example.com/produk.png'),
)

Place Hero(tag: 'gambar-produk') on the first page and the destination page with identical tags. When Navigator.push runs, Flutter animates the widget smoothly from its start position to its destination — one of the most striking effects in retail apps.

#Page Transitions

Navigation can be given a custom animation via PageRouteBuilder:

PageRouteBuilder(
  transitionDuration: const Duration(milliseconds: 300),
  pageBuilder: (context, animation, secondaryAnimation) =>
      const DetailScreen(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    final curve = CurvedAnimation(
      parent: animation,
      curve: Curves.easeInOut,
    );
    return FadeTransition(opacity: curve, child: child);
  },
)

transitionsBuilder gives you full control over the transition animation. Curves.easeInOut smooths the motion — avoid linear for a more natural feel.

#CustomPaint and Advanced UI Effects

#Drawing Yourself with CustomPainter

When no built-in widget is enough, CustomPaint calls a painter:

class LingkaranPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.indigo
      ..style = PaintingStyle.fill;
 
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 4,
      paint,
    );
  }
 
  @override
  bool shouldRepaint(covariant LingkaranPainter oldDelegate) => false;
}
 
CustomPaint(
  size: const Size(100, 100),
  painter: LingkaranPainter(),
)

CustomPainter.paint receives a Canvas and draws directly — drawCircle, drawPath, and drawLine are its primitives. shouldRepaint controls when the painter runs again; return false if it doesn't depend on state.

#Advanced UI Effects

Combining the animation toolkit with CustomPaint opens many possibilities: progress rings, charts, maps, even parallax effects. For complex motion, consider flutter_animate and mature community animation packages — use a library when available, write a painter only when needed.

#Conclusion

Key takeaways:

• Implicit animations for simple changes; explicit for full control.
• AnimationController produces 0-1 values with vsync and forward.
• Tween maps values; AnimatedBuilder rebuilds only dependent parts.
• Hero with identical tags creates a flying transition between pages.
• PageRouteBuilder gives full control over navigation animations.
• CustomPaint and CustomPainter draw effects not available in built-in widgets.

In the next episode 17 we discuss internationalization and accessibility — i18n with flutter_localizations, RTL support and locale-aware formatting, accessibility best practices with semantics and focus order, and inclusive UX and accessibility testing. Your app is ready to serve global and diverse users.