Flutter Performance Optimization — Reduce Widget Rebuilds, Lazy Loading, and Memoization

The three root causes of jank and how to fix each one.

Cause 1: Unnecessary Widget Rebuilds

// ❌ Bad: the whole parent rebuilds every time
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // All children rebuild every time
    return Column(children: [
      Text(DateTime.now().toString()), // changes every second
      ExpensiveWidget(),               // rebuilds every second → wasted
    ]);
  }
}

// ✅ Good: cache immutable widgets with const
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      TimerText(),              // isolated StatefulWidget
      const ExpensiveWidget(),  // completely skipped with const
    ]);
  }
}

Cause 2: Building All List Items at Once

// ❌ Bad: builds all items upfront
ListView(
  children: items.map((item) => ItemCard(item: item)).toList(),
)

// ✅ Good: builds only visible items
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemCard(item: items[index]),
)

// Even better: slivers for complex scrolling
CustomScrollView(
  slivers: [
    SliverAppBar(pinned: true, title: const Text('Title')),
    SliverList.builder(
      delegate: SliverChildBuilderDelegate(
        (ctx, i) => ItemCard(item: items[i]),
        childCount: items.length,
      ),
    ),
  ],
)

Cause 3: Repeating Expensive Computations

// ❌ Bad: sorts inside build() on every rebuild
@override
Widget build(BuildContext context) {
  final sorted = items.sorted(...); // O(n log n) every time
  return ListView.builder(...);
}

// ✅ Good: useMemoized recomputes only when dependencies change (hooks)
final sorted = useMemoized(
  () => items.sorted(...),
  [items],
);

// With Riverpod
final sortedItemsProvider = Provider<List<Item>>((ref) {
  final items = ref.watch(itemsProvider);
  return items.sorted(...); // recomputes only when items changes
});

Measure with Flutter DevTools

flutter run --profile
# DevTools → Performance → Record → Identify jank frames
# Widget Rebuild Stats → see how many times widgets rebuild

Summary

const widgets    → completely skip immutable subtrees
ListView.builder → build only visible items (60fps with millions of rows)
Memoization      → cache heavy computation with Provider / useMemoized
Measure first    → profile before optimizing; don't guess the bottleneck

Apply optimizations only where DevTools shows a real bottleneck. Premature optimization is the enemy.