[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-gestire-le-connessioni-di-rete-in-flutter-con-connectivity-plus-e-stati-offline":3,"comments-article-gestire-le-connessioni-di-rete-in-flutter-con-connectivity-plus-e-stati-offline":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},40,"Gestire le connessioni di rete in Flutter con connectivity_plus e stati offline","gestire-le-connessioni-di-rete-in-flutter-con-connectivity-plus-e-stati-offline","Impara a rilevare lo stato della connessione, gestire le modalità offline e costruire un'esperienza utente resiliente in Flutter con connectivity_plus e internet_connection_checker.","## Perché gestire lo stato della rete\n\nUn'app mobile professionale deve funzionare bene anche quando la connessione è instabile o assente. Ignorare gli stati offline porta a errori improvvisi, spinner infiniti e utenti frustrati. In questo articolo vediamo come rilevare e reagire ai cambiamenti di connettività in Flutter usando il pacchetto `connectivity_plus`, integrandolo con un controllo reale della raggiungibilità di Internet.\n\n## connectivity_plus: cosa fa e cosa NON fa\n\nIl pacchetto `connectivity_plus` (mantenuto dalla community Flutter) permette di sapere **a quale tipo di rete** è collegato il dispositivo: WiFi, dati mobili, ethernet o nessuna.\n\nAttenzione a un equivoco comune: `connectivity_plus` indica solo la presenza di un'**interfaccia di rete attiva**, non se Internet è realmente raggiungibile. Un utente può essere connesso al WiFi di un aeroporto senza aver superato il captive portal: la connettività risulta `wifi`, ma le richieste HTTP falliscono. Per questo lo abbineremo a un controllo effettivo.\n\n### Installazione\n\n```yaml\ndependencies:\n  connectivity_plus: ^6.0.5\n  internet_connection_checker_plus: ^2.5.2\n```\n\n## Rilevare il tipo di connessione\n\n```dart\nimport 'package:connectivity_plus\u002Fconnectivity_plus.dart';\n\nFuture\u003Cvoid> checkConnection() async {\n  final result = await Connectivity().checkConnectivity();\n\n  if (result.contains(ConnectivityResult.mobile)) {\n    print('Connesso tramite dati mobili');\n  } else if (result.contains(ConnectivityResult.wifi)) {\n    print('Connesso tramite WiFi');\n  } else if (result.contains(ConnectivityResult.none)) {\n    print('Nessuna connessione di rete');\n  }\n}\n```\n\nDalla versione 6, `checkConnectivity()` restituisce una `List\u003CConnectivityResult>` perché un dispositivo può avere più interfacce attive contemporaneamente.\n\n## Ascoltare i cambiamenti in tempo reale\n\nPossiamo ascoltare uno stream che emette un evento a ogni cambio di stato:\n\n```dart\nlate final StreamSubscription\u003CList\u003CConnectivityResult>> _subscription;\n\nvoid startListening() {\n  _subscription = Connectivity().onConnectivityChanged.listen(\n    (List\u003CConnectivityResult> results) {\n      final isOffline = results.contains(ConnectivityResult.none);\n      print(isOffline ? 'Offline' : 'Online');\n    },\n  );\n}\n\nvoid dispose() {\n  _subscription.cancel();\n}\n```\n\nRicordati sempre di annullare la sottoscrizione per evitare memory leak.\n\n## Un servizio robusto per lo stato online reale\n\nCombiniamo il tipo di connessione con la verifica della raggiungibilità di Internet, esponendo uno `Stream\u003Cbool>` semplice da consumare in tutta l'app.\n\n```dart\nimport 'dart:async';\nimport 'package:connectivity_plus\u002Fconnectivity_plus.dart';\nimport 'package:internet_connection_checker_plus\u002Finternet_connection_checker_plus.dart';\n\nclass NetworkService {\n  final _controller = StreamController\u003Cbool>.broadcast();\n  StreamSubscription? _connectivitySub;\n\n  Stream\u003Cbool> get onStatusChange => _controller.stream;\n\n  void init() {\n    _connectivitySub =\n        Connectivity().onConnectivityChanged.listen((_) => _updateStatus());\n    _updateStatus();\n  }\n\n  Future\u003Cvoid> _updateStatus() async {\n    final results = await Connectivity().checkConnectivity();\n    if (results.contains(ConnectivityResult.none)) {\n      _controller.add(false);\n      return;\n    }\n    \u002F\u002F Verifica reale: c'è davvero Internet?\n    final hasInternet = await InternetConnection().hasInternetAccess;\n    _controller.add(hasInternet);\n  }\n\n  void dispose() {\n    _connectivitySub?.cancel();\n    _controller.close();\n  }\n}\n```\n\n## Mostrare un banner offline nella UI\n\nUn pattern efficace è un banner persistente che appare solo quando l'utente perde la connessione:\n\n```dart\nclass ConnectionBanner extends StatelessWidget {\n  final NetworkService service;\n  const ConnectionBanner({super.key, required this.service});\n\n  @override\n  Widget build(BuildContext context) {\n    return StreamBuilder\u003Cbool>(\n      stream: service.onStatusChange,\n      initialData: true,\n      builder: (context, snapshot) {\n        final isOnline = snapshot.data ?? true;\n        return AnimatedContainer(\n          duration: const Duration(milliseconds: 300),\n          height: isOnline ? 0 : 40,\n          color: Colors.red.shade700,\n          alignment: Alignment.center,\n          child: isOnline\n              ? null\n              : const Text(\n                  'Nessuna connessione a Internet',\n                  style: TextStyle(color: Colors.white),\n                ),\n        );\n      },\n    );\n  }\n}\n```\n\n## Best practice per una strategia offline-first\n\n- **Non bloccare l'interazione**: mostra dati in cache invece di uno spinner infinito.\n- **Distingui \"interfaccia attiva\" da \"Internet raggiungibile\"**: verifica sempre con una richiesta reale prima di operazioni critiche.\n- **Fai debounce degli eventi**: durante i cambi di rete lo stream può emettere più eventi ravvicinati; applica un piccolo `debounce` per evitare flicker della UI.\n- **Metti in coda le operazioni**: salva localmente le azioni fallite (es. con una tabella pending) e riprovale quando torna la connessione.\n- **Testa gli scenari reali**: modalità aereo, WiFi senza Internet, passaggio WiFi\u002Fdati mobili.\n\n## Conclusione\n\nGestire correttamente lo stato della rete è un tassello fondamentale per app affidabili. Con `connectivity_plus` per il tipo di connessione e un controllo di raggiungibilità reale ottieni uno stato online affidabile, base ideale per costruire esperienze offline-first che non lasciano mai l'utente bloccato.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F7f39da62-d3f8-4973-97ba-a0f2b3c6db7d.jpg",null,"published","2026-07-14T04:00:37+00:00","Stato di rete in Flutter con connectivity_plus","Guida pratica a connectivity_plus in Flutter: rileva connessioni WiFi\u002Fdati, gestisci gli stati offline e costruisci app resilienti offline-first.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219601537]