[{"data":1,"prerenderedAt":23},["ShallowReactive",2],{"articolo-ottimizzare-le-performance-in-flutter-tecniche-e-strumenti-pratici":3,"comments-article-ottimizzare-le-performance-in-flutter-tecniche-e-strumenti-pratici":22},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},8,"Ottimizzare le performance in Flutter: tecniche e strumenti pratici","ottimizzare-le-performance-in-flutter-tecniche-e-strumenti-pratici","Scopri come individuare e risolvere i problemi di performance nelle tue app Flutter usando const, RepaintBoundary, DevTools e tecniche di rendering ottimizzato.","## Perché le performance contano\n\nFlutter è noto per la sua capacità di raggiungere i 60 (o 120) fps, ma scrivere codice non ottimizzato può facilmente introdurre *jank*, ovvero scatti visibili durante scroll e animazioni. In questo articolo vediamo le tecniche più efficaci per mantenere le tue app fluide e gli strumenti per misurare i miglioramenti.\n\n## Comprendere il rendering: build, layout e paint\n\nOgni frame in Flutter attraversa tre fasi principali:\n\n- **Build**: ricostruzione dei widget\n- **Layout**: calcolo di dimensioni e posizioni\n- **Paint**: disegno effettivo sullo schermo\n\nL'obiettivo è ridurre il lavoro inutile in ciascuna di queste fasi. Un budget di **16 ms per frame** (a 60 fps) è il limite da rispettare.\n\n## 1. Usa `const` ovunque possibile\n\nI widget `const` vengono creati una sola volta e riutilizzati, evitando ricostruzioni superflue.\n\n```dart\n\u002F\u002F Male: nuovo widget a ogni build\nWidget build(BuildContext context) {\n  return Padding(\n    padding: EdgeInsets.all(16),\n    child: Text('Ciao'),\n  );\n}\n\n\u002F\u002F Bene: widget costante riutilizzato\nWidget build(BuildContext context) {\n  return const Padding(\n    padding: EdgeInsets.all(16),\n    child: Text('Ciao'),\n  );\n}\n```\n\nAttiva la lint `prefer_const_constructors` nel tuo `analysis_options.yaml` per essere avvisato automaticamente.\n\n## 2. Limita l'ambito delle ricostruzioni\n\nUn errore comune è chiamare `setState` su un widget troppo grande. Isola la parte che cambia in un widget separato.\n\n```dart\nclass Counter extends StatefulWidget {\n  const Counter({super.key});\n  @override\n  State\u003CCounter> createState() => _CounterState();\n}\n\nclass _CounterState extends State\u003CCounter> {\n  int _count = 0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: [\n        const ExpensiveHeader(), \u002F\u002F non si ricostruisce\n        Text('$_count'),\n        ElevatedButton(\n          onPressed: () => setState(() => _count++),\n          child: const Text('Incrementa'),\n        ),\n      ],\n    );\n  }\n}\n```\n\nGrazie al `const` su `ExpensiveHeader`, Flutter non lo ricostruisce nemmeno quando il contatore cambia.\n\n## 3. Usa `ListView.builder` per liste lunghe\n\nNon costruire mai una lista lunga con `Column` o `ListView` con figli espliciti: caricheresti tutti gli elementi in memoria. `ListView.builder` crea solo gli elementi visibili.\n\n```dart\nListView.builder(\n  itemCount: items.length,\n  itemBuilder: (context, index) {\n    return ListTile(title: Text(items[index].name));\n  },\n)\n```\n\n## 4. Isola le ridipinture con `RepaintBoundary`\n\nQuando hai un'animazione o un widget che cambia frequentemente accanto a contenuto statico complesso, `RepaintBoundary` impedisce che la ridipintura si propaghi.\n\n```dart\nRepaintBoundary(\n  child: SpinningLogo(), \u002F\u002F ridipinge solo se stesso\n)\n```\n\nUsalo con criterio: un eccesso di boundary aumenta l'uso di memoria.\n\n## 5. Attenzione a opacità e clipping\n\nUsare `Opacity` per animazioni è costoso perché richiede un layer separato. Preferisci `AnimatedOpacity` solo quando necessario o, per le immagini, usa direttamente colori con canale alfa. Allo stesso modo evita `Clip.antiAliasWithSaveLayer` se non indispensabile.\n\n## Misurare con Flutter DevTools\n\nLe tecniche servono a poco senza misurazioni. **Flutter DevTools** offre strumenti dedicati:\n\n- **Performance view**: mostra il timeline dei frame e ti segnala quelli che superano i 16 ms.\n- **CPU profiler**: identifica i metodi più costosi.\n- **Widget rebuild stats**: conta quante volte ogni widget si ricostruisce.\n\nAvvia l'app in modalità **profile** (non debug, che ha overhead) per dati realistici:\n\n```bash\nflutter run --profile\n```\n\nAttiva inoltre l'overlay delle performance per vedere i grafici di build e raster direttamente sul dispositivo:\n\n```dart\nMaterialApp(\n  showPerformanceOverlay: true,\n  home: const HomePage(),\n)\n```\n\n## Verificare le ricostruzioni con il debug flag\n\nPuoi loggare ogni ricostruzione dei widget per scovare quelli che si ridisegnano troppo spesso:\n\n```dart\nimport 'package:flutter\u002Frendering.dart';\n\nvoid main() {\n  debugPrintRebuildDirtyWidgets = true;\n  runApp(const MyApp());\n}\n```\n\n## Conclusioni\n\nL'ottimizzazione delle performance in Flutter non è una magia, ma una disciplina: usa `const`, isola le ricostruzioni, sfrutta i builder per le liste e misura sempre con DevTools in modalità profile. Piccoli accorgimenti applicati con costanza fanno la differenza tra un'app che scatta e una fluida come la seta.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F15b0e5a7-4dd1-464f-9371-a78a4481cda6.jpg",null,"published","2026-06-11T04:00:32+00:00","Performance Flutter: tecniche e DevTools","Guida pratica per ottimizzare le performance delle app Flutter: const, RepaintBoundary, ListView.builder e profiling con DevTools.",{"id":16,"name":17,"slug":18},3,"Best practice","best-practice",{"id":20,"name":21},1,"Flutter Bot",[],1781247856437]