Performance Optimization

Performance Optimization for Flutter

Complete guide to building high-performance Flutter applications that maintain 60 FPS (or 120 FPS on capable devices).

Performance Goals

• 60 FPS: Each frame must render in < 16ms
• 120 FPS: Each frame must render in < 8ms (for high refresh rate displays)
• Jank-free: No dropped frames during scrolling or animations
• Fast startup: App ready in < 2 seconds
• Low memory: < 100MB for typical screens

Widget Optimization

Use const Constructors

Const widgets are built once and reused:

// ❌ BAD - Widget rebuilt every time
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(16.0),
    child: Text('Static Text'),
  );
}

// ✅ GOOD - Widget built once, reused
Widget build(BuildContext context) {
  return const Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Static Text'),
  );
}

// ✅ GOOD - Individual widgets const
Widget build(BuildContext context) {
  return Column(
    children: const [
      Icon(Icons.home),
      SizedBox(height: 8),
      Text('Home'),
    ],
  );
}

Rule: If a widget's properties don't change, make it const.

Minimize Widget Rebuilds

Use Obx strategically to limit rebuild scope:

// ❌ BAD - Entire Column rebuilds
Obx(() => Column(
  children: [
    Text(controller.title.value),
    ExpensiveWidget(),
    AnotherExpensiveWidget(),
  ],
))

// ✅ GOOD - Only Text rebuilds
Column(
  children: [
    Obx(() => Text(controller.title.value)),
    const ExpensiveWidget(),
    const AnotherExpensiveWidget(),
  ],
)

Proper Key Usage

Keys help Flutter identify which widgets to reuse:

// ❌ BAD - No keys, Flutter may rebuild unnecessarily
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index].name));
  },
)

// ✅ GOOD - ValueKey helps Flutter track items
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      key: ValueKey(items[index].id),
      title: Text(items[index].name),
    );
  },
)

// When to use keys:
// - ObjectKey: Compare entire object
// - ValueKey: Compare single value (id, index)
// - UniqueKey: Force rebuild
// - GlobalKey: Access widget state from anywhere (expensive, use sparingly)

Extract Widgets

Extract complex widgets to reduce rebuild scope:

// ❌ BAD - All items rebuild when list changes
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(() => ListView.builder(
      itemCount: controller.items.length,
      itemBuilder: (context, index) {
        final item = controller.items[index];
        return Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Text(item.title),
              Text(item.subtitle),
              Row(
                children: [
                  Icon(Icons.star),
                  Text('${item.rating}'),
                ],
              ),
            ],
          ),
        );
      },
    ));
  }
}

// ✅ GOOD - Extract item widget
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(() => ListView.builder(
      itemCount: controller.items.length,
      itemBuilder: (context, index) {
        return ItemWidget(item: controller.items[index]);
      },
    ));
  }
}

class ItemWidget extends StatelessWidget {
  final Item item;
  const ItemWidget({Key? key, required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Text(item.title),
          Text(item.subtitle),
          Row(
            children: [
              const Icon(Icons.star),
              Text('${item.rating}'),
            ],
          ),
        ],
      ),
    );
  }
}

List Performance

Use ListView.builder

Never use ListView(children: [...]) for large lists:

// ❌ BAD - All items created upfront
ListView(
  children: items.map((item) => ItemWidget(item: item)).toList(),
)

// ✅ GOOD - Items created on demand
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
)

// ✅ GOOD - Separated items (for sticky headers)
ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
  separatorBuilder: (context, index) => const Divider(),
)

Optimize List Scroll Performance

// Add cacheExtent for smoother scrolling
ListView.builder(
  cacheExtent: 500, // Render items 500px off-screen
  itemCount: items.length,
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
)

// Use addAutomaticKeepAlives: false if items don't need to preserve state
ListView.builder(
  addAutomaticKeepAlives: false,
  addRepaintBoundaries: true,
  itemCount: items.length,
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
)

Infinite Scroll / Pagination

class ProductListController extends GetxController {
  final _items = <Product>[].obs;
  List<Product> get items => _items;

  final _isLoading = false.obs;
  bool get isLoading => _isLoading.value;

  int _currentPage = 1;
  bool _hasMore = true;

  final ScrollController scrollController = ScrollController();

  @override
  void onInit() {
    super.onInit();
    loadItems();
    scrollController.addListener(_onScroll);
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }

  void _onScroll() {
    if (scrollController.position.pixels >=
        scrollController.position.maxScrollExtent - 200) {
      if (!_isLoading.value && _hasMore) {
        loadMore();
      }
    }
  }

  Future<void> loadItems() async {
    _isLoading.value = true;
    final result = await repository.getProducts(page: 1);
    result.fold(
      (failure) => {},
      (products) {
        _items.value = products;
        _hasMore = products.length >= 20; // Assuming page size of 20
      },
    );
    _isLoading.value = false;
  }

  Future<void> loadMore() async {
    _isLoading.value = true;
    _currentPage++;
    final result = await repository.getProducts(page: _currentPage);
    result.fold(
      (failure) => _currentPage--,
      (products) {
        _items.addAll(products);
        _hasMore = products.length >= 20;
      },
    );
    _isLoading.value = false;
  }
}

Image Optimization

Use cached_network_image

import 'package:cached_network_image/cached_network_image.dart';

// ❌ BAD - No caching, re-downloads every time
Image.network('https://example.com/image.jpg')

// ✅ GOOD - Cached, with placeholders
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => const Icon(Icons.error),
  fadeInDuration: const Duration(milliseconds: 300),
  memCacheWidth: 400, // Resize for memory efficiency
)

Optimize Image Sizes

// Specify dimensions to avoid unnecessary rendering
CachedNetworkImage(
  imageUrl: product.imageUrl,
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  memCacheWidth: 200 * 2, // 2x for high DPI displays
  memCacheHeight: 200 * 2,
)

// For list thumbnails, use lower resolution
CachedNetworkImage(
  imageUrl: product.thumbnailUrl, // Server-side thumbnail
  width: 50,
  height: 50,
  memCacheWidth: 100,
  memCacheHeight: 100,
)

Precache Images

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // Precache images that will be needed soon
  precacheImage(
    CachedNetworkImageProvider(product.imageUrl),
    context,
  );
}

Memory Management

Dispose Controllers and Listeners

class MyController extends GetxController {
  late final StreamSubscription _subscription;
  late final ScrollController scrollController;
  late final TextEditingController textController;

  @override
  void onInit() {
    super.onInit();
    scrollController = ScrollController();
    textController = TextEditingController();
    _subscription = someStream.listen((data) {
      // Handle data
    });
  }

  @override
  void onClose() {
    // CRITICAL: Dispose all resources
    scrollController.dispose();
    textController.dispose();
    _subscription.cancel();
    super.onClose();
  }
}

Avoid Memory Leaks with GetX

// ❌ BAD - Permanent controller never disposed
Get.put(MyController(), permanent: true);

// ✅ GOOD - Controller disposed when not needed
Get.lazyPut(() => MyController());

// ✅ GOOD - Explicitly control lifecycle
Get.put(MyController(), tag: 'unique-tag');
// Later: Get.delete<MyController>(tag: 'unique-tag');

Use WeakReference for Callbacks

class MyController extends GetxController {
  Timer? _timer;

  @override
  void onInit() {
    super.onInit();
    // Use WeakReference to avoid keeping controller alive
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (!isClosed) {
        updateData();
      }
    });
  }

  @override
  void onClose() {
    _timer?.cancel();
    super.onClose();
  }
}

Lazy Loading and Code Splitting

Deferred Imports

// feature_a.dart - Large feature module
import 'package:flutter/material.dart';

class FeatureAPage extends StatelessWidget {
  // Heavy feature implementation
}

// main.dart - Lazy load feature
import 'feature_a.dart' deferred as feature_a;

void navigateToFeatureA() async {
  await feature_a.loadLibrary(); // Load code on demand
  Get.to(() => feature_a.FeatureAPage());
}

Lazy Controller Initialization

// ❌ BAD - All controllers loaded at startup
void main() {
  Get.put(HomeController());
  Get.put(ProfileController());
  Get.put(SettingsController());
  runApp(MyApp());
}

// ✅ GOOD - Controllers loaded when needed
class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

GetPage(
  name: '/home',
  page: () => HomePage(),
  binding: HomeBinding(), // Loaded only when route accessed
)

Animation Performance

Use AnimatedWidget

// ❌ BAD - Rebuilds entire widget tree
class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: _controller.value,
      child: ExpensiveWidget(), // Rebuilt every frame!
    );
  }
}

// ✅ GOOD - Only animated part rebuilds
class ScaleTransition extends AnimatedWidget {
  const ScaleTransition({
    required Animation<double> scale,
    required this.child,
  }) : super(listenable: scale);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Transform.scale(
      scale: animation.value,
      child: child,
    );
  }
}

// Usage
ScaleTransition(
  scale: _controller,
  child: const ExpensiveWidget(), // Not rebuilt!
)

Limit Simultaneous Animations

// ❌ BAD - Too many simultaneous animations
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(100, (index) =>
        AnimatedContainer(
          duration: Duration(seconds: 1),
          // Each container animates independently
        ),
      ),
    );
  }
}

// ✅ GOOD - Stagger animations, limit concurrent
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      initialItemCount: items.length,
      itemBuilder: (context, index, animation) {
        return FadeTransition(
          opacity: animation,
          child: ItemWidget(item: items[index]),
        );
      },
    );
  }
}

Profiling and Debugging

Use Flutter DevTools

# Run app in profile mode (not debug!)
flutter run --profile

# Open DevTools
# Press 'w' in terminal or visit: http://localhost:9100

Key DevTools Features:

• Performance: Identify janky frames, long build times
• Memory: Track heap usage, find leaks
• Network: Monitor API calls, payload sizes
• Timeline: Visualize frame rendering

Identify Build Performance Issues

// Add debug print to measure build time
@override
Widget build(BuildContext context) {
  final stopwatch = Stopwatch()..start();

  final widget = ExpensiveWidget();

  if (kDebugMode) {
    print('Build took: ${stopwatch.elapsedMilliseconds}ms');
  }

  return widget;
}

Performance Overlay

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true, // Shows FPS graphs
      home: HomePage(),
    );
  }
}

Best Practices Checklist

Widget Optimization

• Use const constructors wherever possible
• Minimize Obx scope to smallest widget
• Extract complex widgets into separate classes
• Use proper keys for list items
• Avoid unnecessary setState or update() calls

List Performance

• Always use ListView.builder for dynamic lists
• Implement pagination for large datasets
• Add cacheExtent for smoother scrolling
• Use addAutomaticKeepAlives: false when appropriate

Image Performance

• Use cached_network_image for network images
• Specify image dimensions
• Use appropriate image resolutions
• Precache critical images

Memory Management

• Dispose all controllers in onClose()
• Cancel stream subscriptions
• Dispose animation controllers
• Use lazyPut instead of put for GetX controllers

Code Organization

• Use deferred imports for large features
• Lazy-load controllers with bindings
• Split large files into smaller modules

Animation

• Use AnimatedWidget for custom animations
• Limit simultaneous animations to 2-3
• Use RepaintBoundary for expensive widgets
• Prefer implicit animations (AnimatedContainer, AnimatedOpacity)

Profiling

• Test in profile mode (not debug)
• Use Flutter DevTools regularly
• Monitor frame rendering times (< 16ms target)
• Check memory usage with DevTools
• Profile on real devices, not just emulators

Common Performance Anti-Patterns

Anti-Pattern 1: Unnecessary Rebuilds

// ❌ Obx wrapping entire screen
Obx(() => Scaffold(
  body: Column(children: [
    Text(controller.title.value),
    LargeWidget(),
  ]),
))

// ✅ Obx only on changing widget
Scaffold(
  body: Column(children: [
    Obx(() => Text(controller.title.value)),
    const LargeWidget(),
  ]),
)

Anti-Pattern 2: Expensive Build Methods

// ❌ Heavy computation in build
@override
Widget build(BuildContext context) {
  final processedData = heavyComputation(rawData); // Runs every build!
  return Text(processedData);
}

// ✅ Compute once, cache result
class MyController extends GetxController {
  final _processedData = ''.obs;

  @override
  void onInit() {
    super.onInit();
    _processedData.value = heavyComputation(rawData);
  }
}

Anti-Pattern 3: Not Disposing Resources

// ❌ Memory leak - controller never disposed
class MyController extends GetxController {
  final StreamController<int> _controller = StreamController();
  // Missing onClose() to dispose!
}

// ✅ Proper disposal
class MyController extends GetxController {
  final StreamController<int> _controller = StreamController();

  @override
  void onClose() {
    _controller.close();
    super.onClose();
  }
}

Performance Targets