AppBar — cos’è, configurazione e widget Flutter

Cos’è AppBar in Flutter

AppBar è un componente Material standard del pannello superiore che appare nella parte superiore di uno Scaffold. Contiene il titolo dello schermo, un pulsante di navigazione (di solito un’icona “hamburger” o una freccia “Indietro”) e azioni — icone che aprono ricerca, impostazioni o altre funzioni. AppBar si adatta automaticamente alla piattaforma: su Android utilizza l’ombra inferiore Material standard, su iOS — un design più piatto con trasparenza.

AppBar implementa l’interfaccia PreferredSizeWidget, il che significa che la sua altezza è fissa e nota prima della costruzione. Per impostazione predefinita, l’altezza di AppBar è di 56dp su Android e 44dp su iOS in orientamento ritratto, tenendo conto di SafeArea nella parte superiore. Questa funzionalità consente a Scaffold di calcolare in anticipo lo spazio disponibile per il body, evitando la ricomposizione durante il rendering.

Secondo Flutter Material Library Guide (2026), AppBar ha attraversato diverse iterazioni: in Flutter 1.x era un semplice contenitore con testo, in Flutter 2.x ha ottenuto il supporto per Material 3 e flexibleSpace, e in Flutter 3.x — l’integrazione con System UI (colore della barra di stato, trasparenza). L’AppBar moderna supporta Dynamic Color di Material You sui dispositivi Android 12+.

Struttura di AppBar: proprietà e parametri

AppBar fornisce un insieme di parametri che controllano ogni parte del pannello superiore. Comprendere queste proprietà consente di personalizzare il pannello in modo flessibile per qualsiasi requisito di progettazione senza creare soluzioni personalizzate.

Title e leading: configurazione del titolo e della navigazione

La proprietà title accetta qualsiasi widget, ma il più comune è l’uso di Text con configurazione di stile tramite TextStyle. Per titoli lunghi, si consiglia di avvolgere title in Flexible in modo che il testo venga troncato correttamente quando lo spazio è limitato. La proprietà leading viene automaticamente sostituita da BackButton durante la navigazione verso uno schermo annidato tramite Navigator.push, se non impostata esplicitamente.

Actions: posizionamento delle icone azione

L’elenco actions contiene widget allineati al bordo destro di AppBar. Ogni elemento non deve essere più largo di 48dp (standard Material Design). Per raggruppare le azioni, utilizzare PopupMenuButton — questo nasconde le opzioni meno importanti in un menu a discesa e rispetta le raccomandazioni Material sulla densità dell’interfaccia.

Personalizzazione di AppBar: stili, colori e comportamento

AppBar supporta una personalizzazione approfondita tramite proprietà di colore, ombra e riempimento. Lo stile di base viene ereditato dal tema dell’applicazione, ma ogni proprietà può essere sovrascritta individualmente. Esaminiamo i principali scenari di configurazione.

Il colore di sfondo di AppBar viene impostato tramite backgroundColor. Se non specificato, viene utilizzato appBarTheme da ThemeData. In Material 3, il colore di AppBar viene calcolato automaticamente da ColorScheme.primary, ma può essere sovrascritto per uno schermo specifico. Per un’AppBar trasparente (spesso utilizzata nei profili), impostare backgroundColor: Colors.transparent con elevation: 0.

La proprietà elevation controlla l’ombra sotto AppBar. Il valore 0 rimuove l’ombra, creando un effetto di pannello “piatto”, pertinente per Material 3. Il valore 4 fornisce l’ombra standard di Material Design. Per un controllo personalizzato dell’ombra, utilizzare shadowColor — il colore dell’ombra che separa visivamente il pannello dal contenuto.

Per controllare il colore del testo in AppBar, utilizzare foregroundColor. Questa proprietà influisce sul colore del titolo, delle icone e del testo in actions. Quando si cambia backgroundColor, viene automaticamente selezionato un foregroundColor contrastante, ma può essere forzato per design non standard.

SliverAppBar: versione animata di AppBar

SliverAppBar è un’estensione di AppBar per l’uso all’interno di CustomScrollView che supporta l’animazione durante lo scorrimento: compressione, effetto parallasse e fissaggio. A differenza di un’AppBar standard, SliverAppBar è un widget sliver e può cambiare dimensione dinamicamente in base alla posizione di scorrimento.

Le modalità principali di SliverAppBar sono determinate da una combinazione delle proprietà pinned, floating e snap. In modalità pinned, il pannello rimane sempre visibile nella parte superiore dello schermo. In modalità floating, appare durante lo scorrimento all’indietro. La combinazione floating + snap crea un comportamento di pannello “appiccicoso” che appare al minimo scorrimento verso l’alto, spesso utilizzato nei feed di notizie.

Secondo Flutter API SliverAppBar (2026), per utilizzare SliverAppBar è necessario sostituire un normale ListView o Column con CustomScrollView contenente widget sliver. Scaffold continua a funzionare correttamente, ma la proprietà appBar di Scaffold deve essere null — SliverAppBar viene posizionato all’interno di CustomScrollView come primo sliver.

Esempio di configurazione di AppBar in un’applicazione

Vediamo un esempio di AppBar con ricerca, menu a discesa e TabBar. Questo codice mostra una configurazione tipica del pannello superiore in un’applicazione di produzione in Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalogo'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Impostazioni')),
          const PopupMenuItem(value: 'about', child: Text('Informazioni sull’App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Nell’esempio, AppBar contiene un titolo centrato, un pulsante di apertura Drawer a sinistra, un’icona di ricerca e un menu a discesa a destra. TabBar in basso consente di passare da una categoria di prodotti all’altra. Questa configurazione copre la maggior parte degli scenari delle applicazioni mobili: navigazione, ricerca, opzioni aggiuntive e cambio di sezioni — tutto in un unico pannello superiore.