- \n
- Expensive widget rebuilds<\/li>\n
- Heavy computations on the main thread<\/li>\n
- Inefficient state management<\/li>\n
- Poorly optimized animations<\/li>\n<\/ul>\n
By optimizing these areas, we can achieve a smooth 60 FPS (frames per second) or even 120 FPS<\/strong> performance in Flutter apps.<\/p>\n
2. Optimizing Widget Builds<\/h2>\n
Use Stateless Widgets Where Possible<\/h3>\n
- \n
- StatelessWidget<\/span> is more efficient because it does not rebuild unnecessarily.<\/li>\n
- Prefer const<\/span> widgets where possible to reduce object recreation.<\/li>\n<\/ul>\n
\nconst Text('Hello, Flutter!')\n<\/code><\/pre>\n<\/div>\nMinimize Rebuilds with const Widgets<\/h3>\n
- \n
- Declaring widgets as const<\/strong> ensures they don\u2019t rebuild unless necessary.<\/li>\n
- Use const<\/span> constructors<\/strong> in widget trees.<\/li>\n<\/ul>\n
\nclass MyButton extends StatelessWidget {\nconst MyButton({super.key});\n}\n<\/code><\/pre>\n<\/div>\nAvoid Rebuilding Entire Widget Trees<\/h3>\n
- \n
- Use shouldRebuild<\/span><\/strong> for ListView.builder()<\/span> to avoid rebuilding unchanged items.<\/li>\n
- Extract frequently changing widgets into separate widgets.<\/li>\n<\/ul>\n
\nListView.builder(\nitemBuilder: (context, index) => MyListItem(item: items[index]),\n)\n<\/code><\/pre>\n<\/div>\n3. Efficient State Management<\/h2>\n
Unnecessary setState()<\/span> calls lead to performance issues. Use efficient state management solutions<\/a> like:<\/p>\n
- \n
- Provider<\/strong> (lightweight, recommended for most apps)<\/li>\n
- Riverpod<\/strong> (scalable and testable)<\/li>\n
- Bloc<\/strong> (best for complex state logic)<\/li>\n
- GetX <\/strong>(simple and reactive state management)<\/li>\n<\/ul>\n
Example using Provider:<\/p>\n
\nclass CounterProvider with ChangeNotifier {\nint _count = 0;\n int get count => _count;\n\n void increment() {\n _count++;\n notifyListeners();\n }\n}\nUsing Consumer<\/span> to rebuild only the necessary UI:\nConsumer(\n builder: (context, provider, child) {\n return Text(provider.count.toString());\n },\n);\n<\/code><\/pre>\n<\/div>\n4. Improving UI Rendering Performance<\/h2>\n
Use RepaintBoundary<\/span> to Reduce UI Repaints<\/h3>\n
Wrap widgets with frequent UI updates<\/strong> inside a RepaintBoundary<\/span> to optimize rendering:<\/p>\n
\nRepaintBoundary(\n child: MyAnimatedWidget(),\n)\n<\/code><\/pre>\n<\/div>\nOptimize Scrolling Performance<\/h3>\n
- \n
- Use ListView.builder()<\/span><\/strong> instead of ListView()<\/span>.<\/li>\n
- Set cacheExtent<\/span><\/strong> to keep more items in memory for smoother scrolling.<\/li>\n<\/ul>\n
\nListView.builder(\n itemCount: items.length,\n cacheExtent: 1000, \/\/ Caches off-screen items\n itemBuilder: (context, index) => ListTile(title: Text(items[index])),\n);\n<\/code><\/pre>\n<\/div>\n5. Animations: Keep Them Smooth<\/h2>\n
Use AnimatedBuilder<\/span> for Efficient Animations<\/h3>\n
Instead of using setState()<\/span> inside animations, use AnimatedBuilder:<\/span><\/p>\n
\nAnimatedBuilder(\n animation: myAnimation,\n builder: (context, child) {\n return Transform.scale(scale: myAnimation.value, child: child);\n },\n child: MyWidget(),\n)\n<\/code><\/pre>\n<\/div>\nUse Lottie for Lightweight Animations<\/h3>\n
Instead of using heavy GIFs, use Lottie<\/strong> for vector animations:<\/p>\n
\nLottie.asset('assets\/animation.json')\n<\/code><\/pre>\n<\/div>\nYou May Also Read: <\/strong> Flutter vs. React Native: Choosing the Right Framework<\/a><\/p>\n
6. Memory & CPU Optimization<\/h2>\n
Dispose Controllers to Prevent Memory Leaks<\/h3>\n
Always dispose<\/strong> of controllers in dispose()<\/span> method:<\/p>\n
\n@override\nvoid dispose() {\n myController.dispose();\n super.dispose();\n}\n<\/code><\/pre>\n<\/div>\nUse compute()<\/span> for Heavy Computation<\/h3>\n
Move heavy tasks<\/strong> to an isolate using compute()<\/span>:<\/p>\n
\nFuture fetchData() async {\n final result = await compute(heavyTask, inputData);\n}\n<\/code><\/pre>\n<\/div>\n7. Optimize Network Calls<\/h2>\n
Use dio<\/span> Instead of http<\/span><\/h3>\n
- \n
- dio<\/span> supports interceptors, caching, and better response handling<\/strong>.<\/li>\n<\/ul>\n\n
Future final dio = Dio();\nfinal response = await dio.get('https:\/\/api.example.com\/data');\n<\/code><\/pre>\n<\/div>\nEnable Gzip Compression<\/h3>\n
Ensure API responses use Gzip compression<\/a> to reduce payload size.<\/p>\n
Use Pagination for Large Data<\/h3>\n
Instead of fetching all<\/strong> data at once, use pagination<\/strong>:<\/p>\n
\nfetchData(page: 1, limit: 20);\n<\/code><\/pre>\n<\/div>\n8. Optimize Images & Assets<\/h2>\n
Use CachedNetworkImage<\/span> for Efficient Image Loading<\/h3>\n
This caches images to avoid unnecessary network calls:<\/strong><\/p>\n
\nCachedNetworkImage(\n imageUrl: 'https:\/\/example.com\/image.jpg',\n placeholder: (context, url) => CircularProgressIndicator(),\n)\n<\/code><\/pre>\n<\/div>\nUse WebP Format for Images<\/h3>\n
WebP images are smaller than PNG\/JPEG, improving loading times.<\/p>\n
Compress Images Before Uploading<\/h3>\n
Use Flutter Image Compressor<\/strong> to reduce image size without quality loss.<\/p>\n
\nfinal compressedFile = await FlutterImageCompress.compressWithFile(\n file.path, quality: 70\n );\n<\/code><\/pre>\n<\/div>\n9. Debugging & Monitoring Performance<\/h2>\n
Use Flutter DevTools<\/h3>\n
Run:<\/p>\n
\nflutter pub global activate devtools\nflutter run --profile\n<\/code><\/pre>\n<\/div>\nEnable Performance Overlay<\/h3>\n
\ndebugShowPerformanceOverlay: true\n<\/code><\/pre>\n<\/div>\nUse debugPrintRebuildDirtyWidgets()<\/span><\/h3>\n
This prints unnecessary widget rebuilds<\/strong>.<\/p>\n
\ndebugPrintRebuildDirtyWidgets();\n<\/code><\/pre>\n<\/div>\n
- Set cacheExtent<\/span><\/strong> to keep more items in memory for smoother scrolling.<\/li>\n<\/ul>\n
- Riverpod<\/strong> (scalable and testable)<\/li>\n
- Extract frequently changing widgets into separate widgets.<\/li>\n<\/ul>\n
- Use const<\/span> constructors<\/strong> in widget trees.<\/li>\n<\/ul>\n
- Prefer const<\/span> widgets where possible to reduce object recreation.<\/li>\n<\/ul>\n
- StatelessWidget<\/span> is more efficient because it does not rebuild unnecessarily.<\/li>\n
![\"Shreya](\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2024\/09\/Shreya-Mehta.jpg\")
<\/div>\n![\"Linkedin\"](\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2023\/09\/317750_linkedin_icon.png\"){kind=icon}
<\/a><\/p>\n<\/div>\n