Performance

The frame budget

Flutter draws the screen as frames. At 60 frames per second, each frame has about 16 milliseconds; on 90 or 120 Hz phones, even less. If building, laying out and painting a frame takes longer, the frame is dropped, and the user sees stutter (jank), especially while scrolling or animating. Budget Android phones, common in India, have slower CPUs, so test on one if you can.

Measure first, in profile mode

Debug mode is slow on purpose (it supports hot reload and many checks), so never judge performance in debug. Run flutter run --profile on a real device: it is almost as fast as release but keeps the profiling tools. Open Flutter DevTools: the Performance view shows frame timings (red bars are slow frames), and the widget rebuild tracker shows what rebuilds too often.

flutter run --profile        # measure here, on a real phone
flutter run --release        # what users get

const widgets

A const widget is created once at compile time and reused. When the parent rebuilds, Flutter sees the identical const widget and skips rebuilding it. Mark widgets const wherever their arguments are constant: const Text('Hello'), const SizedBox(height: 8), const Icon(Icons.add). The analyser (with flutter_lints) suggests where const is possible.

Smaller rebuilds

setState rebuilds the whole State's build method. If a big screen has one ticking timer, extracting the timer into its own small StatefulWidget means only that small widget rebuilds every second. The same idea applies to Provider's Consumer/select and Riverpod's narrow watches: rebuild as little as possible.

// Instead of setState in the whole page every second:
class CountdownText extends StatefulWidget {
  const CountdownText({super.key});
  @override
  State<CountdownText> createState() => _CountdownTextState();
}

class _CountdownTextState extends State<CountdownText> {
  int _seconds = 300;
  Timer? _timer;
  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(() => _seconds--));
  }
  @override
  void dispose() { _timer?.cancel(); super.dispose(); }
  @override
  Widget build(BuildContext context) => Text('OTP expires in $_seconds s');
}

Keys

Keys help Flutter match widgets to their state when items are added, removed or reordered in a list. Use ValueKey(item.id) for items with an id, ObjectKey for objects, and UniqueKey to force a fresh widget. GlobalKey gives access to a widget's state from elsewhere (like FormState) but is expensive; use it only when needed.

Lists and images

• Use ListView.builder and GridView.builder for long lists (module 6).
• Images: a 4000 x 3000 photo shown at 100 x 100 still decodes the full image into memory. Use Image(cacheWidth: ...) or request smaller images from the server.
• Cache network images (cached_network_image) so scrolling back does not re-download.
• Move heavy computation off the main isolate with Isolate.run or compute (module 3).

RepaintBoundary, briefly

RepaintBoundary isolates a part of the screen that repaints often, like an animation, so the rest does not repaint with it. Flutter already adds them in many places (for example around list items); add your own only when DevTools shows excessive repainting.

Common mistakes

• Judging speed in debug mode.
• Optimising without measuring: wasted time on parts that were already fast.
• Heavy work in build (sorting, parsing, formatting a whole list) on every rebuild.
• Using GlobalKeys and big setState calls everywhere.