Improving the performance of a Flutter app involves optimizing rendering, reducing unnecessary rebuilds, minimizing resource usage, and more. Here’s a comprehensive list of Flutter performance optimization techniques, grouped into categories for clarity:
1. Rendering Performance
Use const constructors
- Reduces widget rebuilds and improves performance.
const Text('Hello');
Minimize rebuilds
- Use
const,final,Provider, orValueNotifierto isolate widgets that don’t need to rebuild. - Use
builderpattern (ListView.builder,AnimatedBuilder) to build only visible widgets.
Avoid rebuilding the whole widget tree
- Use
StatefulWidgetonly where needed. - Extract widgets into smaller components.
2. Efficient State Management
Choose the right state management
- Use efficient state management libraries like:
ProviderRiverpodBloc/CubitGetX(lightweight, fast)
- Avoid rebuilding the whole tree for minor UI changes.
3. Reduce Layout Passes
Avoid deep widget trees
- Overly nested widgets slow down rendering. Refactor complex UI layouts into simpler ones.
Use const and RepaintBoundary
- Wrap widgets that shouldn’t repaint with
RepaintBoundaryto isolate them.
RepaintBoundary(
child: YourWidget(),
)
4. Image Optimization
Use compressed and resized images
- Use WebP or JPEG formats.
- Resize images to the needed resolution before bundling.
Use CachedNetworkImage
- Prevents repeated downloads and improves image load time.
5. List & Grid Performance
Use ListView.builder / GridView.builder
- Builds only visible items.
- Avoid
ListView(children: [...])for large lists.
Use keys
- Use
ValueKey,ObjectKey, orUniqueKeyto help Flutter understand widget identity.
6. Memory and Garbage Collection
Dispose controllers
- Always dispose of:
TextEditingControllerAnimationControllerStreamSubscription
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Avoid memory leaks
- Don’t retain large data sets in memory unnecessarily.
- Use lazy loading (pagination) for lists.
7. Profiling and Debugging Tools
Use Flutter DevTools
- Performance tab: analyze frame rendering.
- Memory tab: spot leaks or memory bloat.
- CPU tab: identify expensive operations.
8. Avoid Anti-Patterns
| Anti-Pattern | Better Practice |
|---|---|
setState() on large trees | Use scoped state updates |
| Large widget trees in one file | Break into smaller components |
| Synchronous long operations | Use compute() for expensive tasks |
9. Async Optimization
Use compute() for expensive tasks
- Offload heavy work to another isolate.
final result = await compute(expensiveFunction, data);
10. Release Build & Code Shrinking
Always test in release mode
- Debug mode is slower.
flutter run --release
Enable code shrinking (Proguard)
- For Android: Use R8 to shrink and optimize code.
Bonus Tips
- Use
flutter analyzeto find issues. - Use
flutter doctorto ensure environment is optimized. - Reduce package bloat — avoid unused packages.
