[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"tutorial-creare-un-drawer-di-navigazione-personalizzato-in-flutter":3,"comments-tutorial-creare-un-drawer-di-navigazione-personalizzato-in-flutter":67},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"video_url":10,"difficulty":11,"estimated_minutes":12,"flutter_version":13,"status":14,"published_at":15,"meta_title":16,"meta_description":17,"category":18,"author":22,"steps":24},49,"Creare un Drawer di navigazione personalizzato in Flutter","creare-un-drawer-di-navigazione-personalizzato-in-flutter","Impara a costruire un menu laterale (Drawer) completo in Flutter: header personalizzato, voci di menu, evidenziazione della sezione attiva e gestione della navigazione.","Il **Drawer** è il classico menu laterale che si apre scorrendo dal bordo dello schermo o toccando l'icona hamburger nella AppBar. È uno dei pattern di navigazione più diffusi nelle app mobile, ideale quando hai molte sezioni da raggiungere.\n\nIn questo tutorial costruiremo un Drawer completo e riutilizzabile: creeremo un header con le informazioni utente, un elenco di voci di menu con icone, gestiremo l'evidenziazione della sezione attualmente selezionata e collegheremo la navigazione tra le schermate.\n\nAlla fine avrai un componente pulito e facilmente estendibile da integrare in qualsiasi progetto.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002F22dffd31-b47c-4808-8f58-5c6117b800b5.jpg",null,"beginner",25,"3.x","published","2026-07-26T04:30:50+00:00","Drawer di navigazione personalizzato in Flutter","Guida pratica per creare un Drawer laterale in Flutter con header, voci di menu, sezione attiva e navigazione tra le schermate.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,39,46,53,60],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},330,"Predisporre lo Scaffold con il Drawer","Il `Drawer` va assegnato alla proprietà `drawer` dello `Scaffold`. Flutter aggiunge automaticamente l'icona hamburger nella `AppBar` quando è presente una `AppBar`.\n\nPartiamo da una struttura di base con una schermata Home. Il parametro `drawer` accetta un widget: per ora inseriamo un `Drawer` vuoto che riempiremo nei passi successivi.","import 'package:flutter\u002Fmaterial.dart';\n\nvoid main() => runApp(const MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Drawer Demo',\n      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),\n      home: const HomePage(),\n    );\n  }\n}\n\nclass HomePage extends StatelessWidget {\n  const HomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Home')),\n      drawer: const Drawer(), \u002F\u002F lo popoleremo dopo\n      body: const Center(child: Text('Contenuto della Home')),\n    );\n  }\n}","dart","Avviando l'app vedi l'icona hamburger nella AppBar; toccandola si apre un pannello laterale (per ora vuoto).",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":30,"expected_result":38,"demo_url":10,"video_url":10},331,2,"Creare l'header del Drawer","Un buon Drawer inizia spesso con un header che mostra le informazioni dell'utente. Flutter offre `DrawerHeader` e `UserAccountsDrawerHeader`: quest'ultimo è pensato proprio per mostrare nome, email e avatar.\n\nCreiamo un widget dedicato per l'header, così da mantenere il codice ordinato.","class DrawerHeaderWidget extends StatelessWidget {\n  const DrawerHeaderWidget({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return UserAccountsDrawerHeader(\n      decoration: BoxDecoration(\n        color: Theme.of(context).colorScheme.primary,\n      ),\n      accountName: const Text('Mario Rossi'),\n      accountEmail: const Text('mario.rossi@example.com'),\n      currentAccountPicture: const CircleAvatar(\n        backgroundColor: Colors.white,\n        child: Text('MR', style: TextStyle(fontSize: 24)),\n      ),\n    );\n  }\n}","Hai un widget riutilizzabile che mostra un header colorato con avatar, nome ed email.",{"id":40,"position":41,"title":42,"body":43,"code_snippet":44,"code_language":30,"expected_result":45,"demo_url":10,"video_url":10},332,3,"Definire le sezioni dell'app","Per gestire in modo pulito le voci di menu conviene modellare ogni sezione come un dato. Creiamo un `enum` per le sezioni e una piccola classe di supporto con titolo e icona.\n\nQuesto approccio rende semplice aggiungere o rimuovere voci senza duplicare codice nella UI.","enum AppSection { home, profilo, impostazioni, info }\n\nextension AppSectionData on AppSection {\n  String get titolo => switch (this) {\n        AppSection.home => 'Home',\n        AppSection.profilo => 'Profilo',\n        AppSection.impostazioni => 'Impostazioni',\n        AppSection.info => 'Informazioni',\n      };\n\n  IconData get icona => switch (this) {\n        AppSection.home => Icons.home_outlined,\n        AppSection.profilo => Icons.person_outline,\n        AppSection.impostazioni => Icons.settings_outlined,\n        AppSection.info => Icons.info_outline,\n      };\n}","Hai un modello dati che descrive titolo e icona di ogni sezione dell'app.",{"id":47,"position":48,"title":49,"body":50,"code_snippet":51,"code_language":30,"expected_result":52,"demo_url":10,"video_url":10},333,4,"Costruire le voci di menu con evidenziazione della sezione attiva","Ora costruiamo il Drawer completo. Usiamo `ListTile` per ogni voce e la proprietà `selected` per evidenziare la sezione corrente.\n\nIl widget riceve la sezione attualmente selezionata e una callback `onSelect` per notificare al genitore quale voce è stata toccata. Chiamiamo `Navigator.pop(context)` per chiudere il Drawer dopo la selezione.","class AppDrawer extends StatelessWidget {\n  final AppSection selezionata;\n  final ValueChanged\u003CAppSection> onSelect;\n\n  const AppDrawer({\n    super.key,\n    required this.selezionata,\n    required this.onSelect,\n  });\n\n  @override\n  Widget build(BuildContext context) {\n    final scheme = Theme.of(context).colorScheme;\n    return Drawer(\n      child: ListView(\n        padding: EdgeInsets.zero,\n        children: [\n          const DrawerHeaderWidget(),\n          for (final sezione in AppSection.values)\n            ListTile(\n              leading: Icon(sezione.icona),\n              title: Text(sezione.titolo),\n              selected: sezione == selezionata,\n              selectedColor: scheme.primary,\n              selectedTileColor: scheme.primaryContainer.withOpacity(0.3),\n              shape: RoundedRectangleBorder(\n                borderRadius: BorderRadius.circular(12),\n              ),\n              onTap: () {\n                Navigator.pop(context); \u002F\u002F chiude il drawer\n                onSelect(sezione);\n              },\n            ),\n          const Divider(),\n          ListTile(\n            leading: const Icon(Icons.logout),\n            title: const Text('Esci'),\n            onTap: () => Navigator.pop(context),\n          ),\n        ],\n      ),\n    );\n  }\n}","Il Drawer mostra tutte le voci con icone; la sezione attiva è evidenziata con colore e sfondo diversi.",{"id":54,"position":55,"title":56,"body":57,"code_snippet":58,"code_language":30,"expected_result":59,"demo_url":10,"video_url":10},334,5,"Collegare il Drawer alla schermata e cambiare contenuto","Trasformiamo la `HomePage` in uno `StatefulWidget` per tenere traccia della sezione selezionata. Al tocco di una voce aggiorniamo lo stato con `setState`, cambiando sia il titolo della `AppBar` sia il corpo della pagina.\n\nQuesto pattern è perfetto quando le sezioni condividono lo stesso Scaffold. Se invece vuoi schermate completamente separate, puoi usare `Navigator.push` dentro `onSelect`.","class HomePage extends StatefulWidget {\n  const HomePage({super.key});\n\n  @override\n  State\u003CHomePage> createState() => _HomePageState();\n}\n\nclass _HomePageState extends State\u003CHomePage> {\n  AppSection _sezione = AppSection.home;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: Text(_sezione.titolo)),\n      drawer: AppDrawer(\n        selezionata: _sezione,\n        onSelect: (nuova) => setState(() => _sezione = nuova),\n      ),\n      body: Center(\n        child: Text(\n          'Sei nella sezione: ${_sezione.titolo}',\n          style: Theme.of(context).textTheme.titleLarge,\n        ),\n      ),\n    );\n  }\n}","Selezionando una voce dal Drawer, la AppBar e il contenuto centrale cambiano in base alla sezione scelta.",{"id":61,"position":62,"title":63,"body":64,"code_snippet":65,"code_language":30,"expected_result":66,"demo_url":10,"video_url":10},335,6,"Migliorare l'accessibilità e l'apertura programmatica","Per completare il tutorial vediamo due accorgimenti utili.\n\n1. **Apertura programmatica**: a volte vuoi aprire il Drawer da un pulsante custom. Usa una `GlobalKey\u003CScaffoldState>` oppure `Scaffold.of(context).openDrawer()`.\n\n2. **Drawer a destra**: puoi usare `endDrawer` per un menu che si apre dal lato opposto.\n\nEcco un esempio con la chiave globale per aprire il Drawer manualmente.","final _scaffoldKey = GlobalKey\u003CScaffoldState>();\n\nScaffold(\n  key: _scaffoldKey,\n  appBar: AppBar(\n    automaticallyImplyLeading: false,\n    title: const Text('Home'),\n    leading: IconButton(\n      icon: const Icon(Icons.menu),\n      tooltip: 'Apri menu',\n      onPressed: () => _scaffoldKey.currentState?.openDrawer(),\n    ),\n  ),\n  drawer: AppDrawer(\n    selezionata: _sezione,\n    onSelect: (nuova) => setState(() => _sezione = nuova),\n  ),\n  body: const Center(child: Text('Contenuto')),\n);","Puoi aprire il Drawer tramite un pulsante personalizzato e sai come posizionarlo anche a destra con endDrawer.",[],1785219595361]