Performance Optimization

Profiling Commands

# Run in profile mode
flutter run --profile

# Analyze performance
flutter analyze

# DevTools
flutter pub global activate devtools
flutter pub global run devtools

Common Optimizations

Const Widgets

// ❌ Rebuilds every time
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(16),  // Creates new object
    child: Text('Hello'),
  );
}

// ✅ Const prevents rebuilds
Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16),
    child: const Text('Hello'),
  );
}

Selective Provider Watching

// ❌ Rebuilds on any user change
final user = ref.watch(userProvider);
return Text(user.name);

// ✅ Only rebuilds when name changes
final name = ref.watch(userProvider.select((u) => u.name));
return Text(name);

RepaintBoundary

// Isolate expensive widgets
RepaintBoundary(
  child: ComplexAnimatedWidget(),
)

Image Optimization

// Use cached_network_image
CachedNetworkImage(
  imageUrl: url,
  placeholder: (_, __) => const CircularProgressIndicator(),
  errorWidget: (_, __, ___) => const Icon(Icons.error),
)

// Resize images
Image.network(
  url,
  cacheWidth: 200,  // Resize in memory
  cacheHeight: 200,
)

Compute for Heavy Operations

// ❌ Blocks UI thread
final result = heavyComputation(data);

// ✅ Runs in isolate
final result = await compute(heavyComputation, data);

Performance Checklist

DevTools Metrics

• Frame rendering time: < 16ms for 60fps
• Widget rebuilds: Minimize unnecessary rebuilds
• Memory usage: Watch for leaks
• CPU profiler: Identify bottlenecks