[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-responsive-ui-in-flutter-adattare-le-app-a-ogni-schermo-con-layoutbuilder-e-mediaquery":3,"comments-article-responsive-ui-in-flutter-adattare-le-app-a-ogni-schermo-con-layoutbuilder-e-mediaquery":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},27,"Responsive UI in Flutter: adattare le app a ogni schermo con LayoutBuilder e MediaQuery","responsive-ui-in-flutter-adattare-le-app-a-ogni-schermo-con-layoutbuilder-e-mediaquery","Come creare interfacce Flutter che si adattano a smartphone, tablet e desktop usando LayoutBuilder, MediaQuery e i widget adattivi come Flexible ed Expanded.","## Perché il responsive design conta in Flutter\n\nFlutter permette di distribuire una singola codebase su smartphone, tablet, desktop e web. Ma un layout pensato per uno schermo da 5 pollici raramente funziona bene su un monitor da 27\". Per questo è fondamentale costruire interfacce **responsive** (che si adattano allo spazio disponibile) e **adattive** (che cambiano comportamento a seconda della piattaforma).\n\nIn questa guida vedremo gli strumenti principali offerti dal framework per gestire la questione in modo pulito e scalabile.\n\n## MediaQuery: conoscere le dimensioni dello schermo\n\n`MediaQuery` fornisce informazioni sul dispositivo: dimensioni, orientamento, densità dei pixel, padding di sistema (notch, barre di navigazione).\n\n```dart\n@override\nWidget build(BuildContext context) {\n  final size = MediaQuery.sizeOf(context);\n  final orientation = MediaQuery.orientationOf(context);\n\n  return Text('Larghezza: ${size.width}, orientamento: $orientation');\n}\n```\n\nDa Flutter 3.10 sono disponibili i metodi `MediaQuery.sizeOf(context)` e `MediaQuery.orientationOf(context)`: sono più efficienti di `MediaQuery.of(context)` perché il widget viene ricostruito solo quando cambia la specifica proprietà osservata, non l'intero `MediaQueryData`.\n\n## LayoutBuilder: adattarsi allo spazio del genitore\n\nMentre `MediaQuery` guarda l'intero schermo, `LayoutBuilder` fornisce i vincoli imposti dal widget genitore. È lo strumento ideale per componenti riutilizzabili che devono adattarsi al contenitore in cui vengono inseriti.\n\n```dart\nLayoutBuilder(\n  builder: (context, constraints) {\n    if (constraints.maxWidth \u003C 600) {\n      return const _LayoutMobile();\n    } else if (constraints.maxWidth \u003C 1200) {\n      return const _LayoutTablet();\n    } else {\n      return const _LayoutDesktop();\n    }\n  },\n)\n```\n\n## Definire i breakpoint\n\nUn approccio ordinato consiste nel centralizzare i breakpoint in una classe dedicata, così da riutilizzarli in tutta l'app.\n\n```dart\nclass Breakpoints {\n  static const double mobile = 600;\n  static const double tablet = 1200;\n}\n\nenum DeviceType { mobile, tablet, desktop }\n\nDeviceType getDeviceType(double width) {\n  if (width \u003C Breakpoints.mobile) return DeviceType.mobile;\n  if (width \u003C Breakpoints.tablet) return DeviceType.tablet;\n  return DeviceType.desktop;\n}\n```\n\n## Widget flessibili: Flexible ed Expanded\n\nAll'interno di `Row` e `Column`, `Expanded` e `Flexible` distribuiscono lo spazio in proporzione, evitando valori di larghezza fissi.\n\n```dart\nRow(\n  children: [\n    Expanded(flex: 2, child: SidebarWidget()),\n    Expanded(flex: 5, child: ContentWidget()),\n  ],\n)\n```\n\nUsa `FractionallySizedBox` quando vuoi che un figlio occupi una frazione dello spazio disponibile:\n\n```dart\nFractionallySizedBox(\n  widthFactor: 0.8,\n  child: Card(child: Text('Occupo l\\'80% della larghezza')),\n)\n```\n\n## Un esempio pratico: lista che diventa griglia\n\nUn pattern comune è mostrare una lista su mobile e una griglia su schermi più larghi.\n\n```dart\nLayoutBuilder(\n  builder: (context, constraints) {\n    final crossAxisCount = (constraints.maxWidth \u002F 300).floor().clamp(1, 4);\n    return GridView.builder(\n      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(\n        crossAxisCount: crossAxisCount,\n        mainAxisSpacing: 12,\n        crossAxisSpacing: 12,\n      ),\n      itemCount: prodotti.length,\n      itemBuilder: (context, index) => ProductCard(prodotti[index]),\n    );\n  },\n)\n```\n\nIn alternativa, `SliverGridDelegateWithMaxCrossAxisExtent` calcola automaticamente il numero di colonne in base a una larghezza massima desiderata per cella.\n\n## Layout adattivi con i widget di Material\n\nFlutter offre widget pensati per grandi schermi. `NavigationRail` sostituisce la `BottomNavigationBar` su tablet e desktop.\n\n```dart\nScaffold(\n  body: Row(\n    children: [\n      if (isWideScreen)\n        NavigationRail(\n          selectedIndex: _index,\n          onDestinationSelected: (i) => setState(() => _index = i),\n          destinations: const [\n            NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),\n            NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Impostazioni')),\n          ],\n        ),\n      Expanded(child: _pagine[_index]),\n    ],\n  ),\n  bottomNavigationBar: isWideScreen ? null : BottomNavigationBar(\u002F* ... *\u002F),\n)\n```\n\n## Best practice\n\n- **Evita dimensioni fisse in pixel**: preferisci `Expanded`, `Flexible` e percentuali.\n- **Usa `LayoutBuilder` per i componenti**, `MediaQuery` per decisioni a livello di schermata.\n- **Gestisci il testo con `FittedBox` o `AutoSizeText`** per evitare overflow.\n- **Testa su più dimensioni** con Device Preview o semplicemente ridimensionando la finestra su desktop e web.\n- **Rispetta i SafeArea** avvolgendo i contenuti in `SafeArea` per evitare notch e barre di sistema.\n\n## Conclusione\n\nCostruire UI responsive in Flutter non richiede librerie esterne: `MediaQuery`, `LayoutBuilder` e i widget flessibili coprono la maggior parte dei casi d'uso. Centralizzando i breakpoint e ragionando in termini di spazio disponibile anziché di pixel fissi, otterrai app che appaiono curate su qualsiasi dispositivo, dallo smartphone al desktop.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F00949c8f-ed8c-4e67-b645-8c267cdc9607.jpg",null,"published","2026-07-01T04:00:34+00:00","Responsive UI in Flutter con LayoutBuilder e MediaQuery","Guida pratica per creare interfacce Flutter responsive e adattive con LayoutBuilder, MediaQuery, breakpoint e widget flessibili.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219603971]