What causes a widget to rebuild, and how do you avoid unnecessary rebuilds?

A widget rebuilds when its parent rebuilds, when you call setState, or when an InheritedWidget it depends on changes. To avoid unnecessary rebuilds: use const constructors, extract subtrees into separate widgets, keep the scope of setState as small as possible, and use the child parameter (which is not rebuilt) in widgets like AnimatedBuilder.

build doesn't paint pixels directly; it produces the description of the tree. But if you rebuild too often and too much, you waste CPU and can cause jank (stutters in animations). The causes of a rebuild:

1. The parent rebuilds: by default it drags its children along.
2. setState: rebuilds the State that called it.
3. An InheritedWidget the widget depends on changes (for example, Theme).

Strategies to reduce them:

• const: subtrees that don't change aren't rebuilt.
• Extract widgets: move the part that changes into its own small widget, so only that one rebuilds.
• Scope setState: keep setState in the smallest possible widget, not in the whole screen.
• child parameter: in AnimatedBuilder/ValueListenableBuilder, the child is built once and passed through without rebuilding.

import 'package:flutter/material.dart';

// The "child" trick: the expensive part (the Text) is built ONCE
// and is not rebuilt on every frame of the animation.
class Pulsing extends StatelessWidget {
  const Pulsing({super.key, required this.animation});
  final Animation<double> animation;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      // This child is NOT rebuilt on every frame:
      child: const Text("I don't rebuild every frame"),
      builder: (context, child) {
        return Opacity(
          opacity: animation.value,
          child: child, // reuse the child built only once
        );
      },
    );
  }
}

Calling setState at the highest widget (for example, on the entire screen) for a change that only affects a tiny button. That rebuilds half the UI when rebuilding just that button would be enough. It's also common to skip const and cause avoidable rebuilds on every frame. To diagnose, use the Flutter DevTools (the Performance view and the rebuild counter).

"A widget rebuilds when its parent does, when I call setState, or when an InheritedWidget it depends on changes, like Theme. To avoid unnecessary rebuilds I use const constructors, extract the part that changes into its own small widget to scope the rebuild, put setState in the most specific widget possible, and take advantage of the child parameter of AnimatedBuilder so I don't rebuild what doesn't change. When something is slow, I measure it with DevTools before optimizing blindly."