Scaffold: cos'è, struttura e widget in Flutter

Cos'è Scaffold in Flutter

Scaffold è un widget di layout della libreria Material Design che forma la struttura visiva di base di uno schermo. Implementa il pattern applicativo Material standard: barra superiore, corpo dello schermo, menu laterale e pulsanti fluttuanti. A differenza di Container, che imposta semplicemente dimensioni e stile, Scaffold gestisce l'intero schermo come un sistema unificato.

Ogni applicazione Flutter costruita con Material Design inizia con MaterialApp, all'interno del quale ogni schermo è avvolto in uno Scaffold. È Scaffold che garantisce la corretta visualizzazione di AppBar su tutti i dispositivi, tenendo conto di SafeArea per iPhone X e superiori. È anche responsabile dell'ordine z: Drawer appare sopra body, e SnackBar appare sopra l'intera interfaccia, ma sotto le finestre di dialogo.

Secondo il Riferimento API Flutter (2026), Scaffold è un requisito obbligatorio per il corretto funzionamento di widget come SnackBar, BottomSheet e PersistentBottomSheet. Senza Scaffold, questi componenti lanciano un'eccezione perché dipendono da InheritedWidget Scaffold.of per accedere al contesto di Scaffold. Pertanto, posizionare qualsiasi contenuto direttamente in Container invece di Scaffold è un errore comune tra i principianti, che porta alla perdita di funzionalità Material.

Scaffold nella gerarchia dei widget

In una tipica applicazione Flutter, Scaffold si trova all'interno di MaterialApp, di solito sotto WidgetsApp o CupertinoApp nello sviluppo multipiattaforma. MaterialApp crea Navigator e tema, mentre Scaffold definisce la struttura dello schermo corrente. Ogni schermo può avere il proprio Scaffold con AppBar, Drawer e BottomNavigationBar unici, consentendo una personalizzazione flessibile dell'interfaccia per una pagina specifica.

Per una personalizzazione avanzata, Scaffold può essere combinato con NestedScrollView — questo consente di implementare effetti di scorrimento complessi, come un'AppBar comprimibile con effetto parallasse. Tuttavia, nella maggior parte dei casi, lo Scaffold standard con le sue proprietà è sufficiente per costruire uno schermo pronto per la produzione.

Struttura di Scaffold: parti chiave del framework

Scaffold è composto da diverse zone obbligatorie e opzionali, ciascuna responsabile di una parte specifica dell'interfaccia. Esaminiamo ogni parte individualmente per capire come interagiscono tra loro.

AppBar — barra superiore

AppBar è la barra superiore dello schermo che mostra il titolo, il pulsante di navigazione e le azioni. Ottiene automaticamente l'altezza corretta di 56dp e tiene conto di SafeArea per i dispositivi con notch. TabBar può essere incorporato in AppBar per cambiare schede utilizzando la proprietà bottom.

Drawer — menu laterale

Drawer è un pannello che scorre da sinistra e fornisce la navigazione attraverso le sezioni dell'applicazione. Scaffold aggiunge automaticamente un'icona hamburger in AppBar se la proprietà drawer è impostata. Drawer può contenere DrawerHeader, ListView con voci di menu e informazioni utente.

BottomNavigationBar — navigazione inferiore

BottomNavigationBar è un pannello nella parte inferiore dello schermo per passare da una sezione all'altra. Contiene da 2 a 5 icone con etichette e supporta Material 3 con indicazione attiva tramite NavigationBar. Scaffold lo posiziona in fondo allo schermo, spostando automaticamente body verso l'alto per evitare che il contenuto venga sovrapposto.

FloatingActionButton — pulsante di azione fluttuante

FloatingActionButton è un pulsante rotondo posizionato nell'angolo inferiore destro dello schermo. Viene utilizzato per l'azione principale sullo schermo, come aggiungere una nuova voce o inviare un messaggio. Scaffold supporta più FAB con animazione estesa tramite le proprietà extended.

Body — contenuto principale

Body è l'area centrale dello schermo dove viene posizionato il contenuto principale. Qualsiasi widget può fungere da body: Column, ListView, GridView, Stack o una composizione personalizzata. Scaffold calcola automaticamente l'altezza di body tenendo conto di AppBar, BottomNavigationBar e SafeArea, eliminando la necessità di regolazione manuale delle dimensioni.

Principali proprietà di Scaffold

Scaffold fornisce oltre 30 proprietà per personalizzare l'aspetto e il comportamento dello schermo. Tra queste ci sono sia proprietà obbligatorie (body) che opzionali che controllano margini, sfondo e stato della tastiera. Comprendere ogni proprietà aiuta a configurare con precisione l'interfaccia in base ai requisiti di progettazione.

La proprietà resizeToAvoidBottomInset è particolarmente importante quando si lavora con moduli: quando è impostata su true (predefinito), Scaffold comprime automaticamente body quando appare la tastiera, mantenendo visibile il campo di input. Questo elimina la necessità di scrivere listener di tastiera personalizzati. Per scenari personalizzati con SingleChildScrollView, la proprietà può essere disabilitata.

Esempio di utilizzo di Scaffold in un'applicazione

Consideriamo un esempio pratico di Scaffold con un set completo di componenti Material. Il codice crea uno schermo con AppBar, Drawer, BottomNavigationBar, FloatingActionButton e SnackBar — una tipica struttura di applicazione mobile in Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('La mia App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Impostazioni'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Azione completata')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

L'esempio utilizza NavigationBar di Material 3 invece del deprecato BottomNavigationBar. Scaffold collega automaticamente tutte le parti: quando Drawer si apre, SnackBar si nasconde; quando si cambiano le schede, body si aggiorna; e FloatingActionButton rimane al suo posto. ScaffoldMessenger garantisce la visualizzazione di SnackBar anche con più Scaffold nella gerarchia.

Scaffold e Material 3: caratteristiche di configurazione

Material 3 (M3) è l'evoluzione di Material Design presentata da Google nel 2023. Scaffold in M3 ha ricevuto diversi cambiamenti: un nuovo widget NavigationBar invece di BottomNavigationBar, supporto per Colore dinamico tramite ColorScheme.fromSeed e raccomandazioni aggiornate per margini e altezze dei componenti. Passare a M3 non richiede la sostituzione di Scaffold — basta aggiornare il tema dell'applicazione.

Per abilitare Material 3 in un progetto, è necessario impostare useMaterial3: true in ThemeData. Scaffold adatta automaticamente lo stile visivo: i margini diventano più grandi (24dp invece di 16dp), i colori vengono ricalcolati dal colore seme, e FloatingActionButton ottiene dimensioni più grandi con angoli arrotondati. Allo stesso tempo, tutte le proprietà esistenti di Scaffold rimangono funzionali.

Secondo la Specifica Material Design 3 (2026), si raccomanda di utilizzare NavigationBar con tre o cinque elementi invece di BottomNavigationBar. Scaffold supporta entrambe le opzioni, ma NavigationBar fornisce un migliore supporto per l'adattabilità e Material You sui dispositivi Pixel.

Configurazione di Scaffold per Material 3

Per il corretto funzionamento di Scaffold con M3, è sufficiente aggiornare il tema e sostituire BottomNavigationBar con NavigationBar. I colori verranno calcolati automaticamente tramite ColorScheme.fromSeed, e Scaffold adatterà i margini ai nuovi standard. Se necessario, backgroundColor può essere sovrascritto direttamente.