How do you build animations that stay smooth?

Implicit animations such as AnimatedContainer and AnimatedOpacity handle a target value change without a controller. Explicit animations give control over timing, repetition and multiple properties. Both are driven by a ticker tied to the frame pipeline.

class FadeBox extends StatefulWidget {
  const FadeBox({super.key});

  @override
  State<FadeBox> createState() => _FadeBoxState();
}

class _FadeBoxState extends State<FadeBox>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _opacity;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _opacity = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOut,
    );
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(opacity: _opacity, child: const FlutterLogo());
  }
}

• Prefer FadeTransition, SlideTransition and ScaleTransition for composited effects
• AnimatedBuilder rebuilds only its builder, not the whole screen
• One ticker per controller; use TickerProviderStateMixin when animating several
• Use Hero for shared-element transitions between routes
• Respect reduced-motion settings and keep durations short for frequent actions

Performance notes

Opacity and transform animations can run on the compositor, while layout-changing animations force relayout every frame. A controller that rebuilds a large subtree wastes UI-thread time. Test animations in profile mode, because debug mode is much slower and not representative.