[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-flutter-hooks-gestire-lo-stato-dei-widget-in-modo-piu-pulito":3,"comments-article-flutter-hooks-gestire-lo-stato-dei-widget-in-modo-piu-pulito":21},{"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},14,"Flutter Hooks: gestire lo stato dei widget in modo più pulito","flutter-hooks-gestire-lo-stato-dei-widget-in-modo-piu-pulito","Scopri come flutter_hooks semplifica la gestione dello stato locale dei widget, riducendo il boilerplate degli StatefulWidget e migliorando la leggibilità del codice.","## Cos'è flutter_hooks\n\nChiunque abbia scritto applicazioni Flutter conosce bene la verbosità degli `StatefulWidget`: bisogna creare una classe separata per lo `State`, gestire manualmente `initState`, `dispose`, `AnimationController` e ricordarsi di liberare le risorse. La libreria **flutter_hooks**, ispirata ai React Hooks, propone un approccio più conciso e componibile per gestire lo stato locale e il ciclo di vita all'interno di un `HookWidget`.\n\nIn questo articolo vedremo come integrarla, gli hook più utili e quando conviene davvero adottarla.\n\n## Installazione\n\nAggiungi la dipendenza al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  flutter_hooks: ^0.20.5\n```\n\nPoi esegui `flutter pub get`.\n\n## Dal StatefulWidget all'HookWidget\n\nVediamo un classico contatore scritto con uno `StatefulWidget`:\n\n```dart\nclass Counter extends StatefulWidget {\n  const Counter({super.key});\n\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 ElevatedButton(\n      onPressed: () => setState(() => _count++),\n      child: Text('Valore: $_count'),\n    );\n  }\n}\n```\n\nLo stesso risultato con flutter_hooks:\n\n```dart\nclass Counter extends HookWidget {\n  const Counter({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    final count = useState(0);\n\n    return ElevatedButton(\n      onPressed: () => count.value++,\n      child: Text('Valore: ${count.value}'),\n    );\n  }\n}\n```\n\nNiente classe `State`, niente `setState`: `useState` restituisce un `ValueNotifier` il cui valore, quando modificato, ricostruisce automaticamente il widget.\n\n## Gli hook più utili\n\n### useState\n\nCome visto, mantiene un valore mutabile tra una build e l'altra.\n\n### useEffect\n\nEsegue effetti collaterali (chiamate di rete, sottoscrizioni) e gestisce la pulizia, sostituendo `initState` e `dispose`:\n\n```dart\nuseEffect(() {\n  final subscription = stream.listen(print);\n  \u002F\u002F la funzione restituita viene chiamata al dispose\n  return subscription.cancel;\n}, const []); \u002F\u002F [] = eseguito una sola volta\n```\n\nIl secondo parametro è la lista delle dipendenze: l'effetto viene rieseguito solo quando uno dei valori cambia.\n\n### useMemoized e useFuture\n\nUtili per memorizzare risultati costosi o gestire future:\n\n```dart\nfinal future = useMemoized(() => api.fetchUser(id), [id]);\nfinal snapshot = useFuture(future);\n\nif (snapshot.connectionState == ConnectionState.waiting) {\n  return const CircularProgressIndicator();\n}\nreturn Text(snapshot.data?.name ?? 'Nessun dato');\n```\n\n### useTextEditingController e useAnimationController\n\nGli hook eliminano la necessità di dichiarare e fare il dispose manuale dei controller:\n\n```dart\nclass LoginForm extends HookWidget {\n  const LoginForm({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    final emailController = useTextEditingController();\n    final animation = useAnimationController(\n      duration: const Duration(milliseconds: 300),\n    );\n\n    return TextField(controller: emailController);\n  }\n}\n```\n\nIl `dispose` viene gestito automaticamente dall'hook.\n\n## Creare un hook personalizzato\n\nUno dei vantaggi maggiori è la possibilità di estrarre logica riutilizzabile in hook custom:\n\n```dart\nValueNotifier\u003Cint> useCounter({int initial = 0}) {\n  final count = useState(initial);\n  \u002F\u002F logica aggiuntiva riutilizzabile\n  return count;\n}\n```\n\nUn hook custom è semplicemente una funzione che usa altri hook, favorendo la composizione.\n\n## Regole da rispettare\n\nGli hook seguono regole precise, analoghe a quelle di React:\n\n- Vanno chiamati **sempre** nello stesso ordine.\n- Non vanno mai chiamati dentro condizioni, cicli o funzioni annidate.\n- Vanno usati solo all'interno del metodo `build` di un `HookWidget`.\n\nViolare queste regole porta a comportamenti imprevedibili, perché gli hook si basano sull'ordine di chiamata per associare lo stato.\n\n## Quando usarli\n\nflutter_hooks brilla quando hai molti controller o logiche di ciclo di vita da gestire in un singolo widget, riducendo drasticamente il boilerplate. Si integra inoltre molto bene con **Riverpod**, tramite il pacchetto `hooks_riverpod` e il widget `HookConsumerWidget`.\n\nNon è però una soluzione di gestione dello stato globale: per quello restano necessari pattern come Riverpod, Bloc o Provider. Gli hook gestiscono lo stato **locale** del widget.\n\n## Conclusione\n\nflutter_hooks offre un modo elegante e componibile per ridurre la verbosità degli `StatefulWidget`, eliminando il rischio di dimenticare il dispose delle risorse. Pur richiedendo qualche regola da rispettare, l'aumento di leggibilità e riuso del codice ne fa uno strumento prezioso per progetti di medie e grandi dimensioni.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002Fa90ed88c-0b9d-45cc-bb4c-d59f25dde682.jpg",null,"published","2026-06-17T04:00:32+00:00","Flutter Hooks: stato dei widget più pulito","Guida pratica a flutter_hooks: useState, useEffect e hook personalizzati per ridurre il boilerplate degli StatefulWidget in Flutter.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1781680690960]