Stack — cos'è, livelli e posizionamento in Flutter

Cos'è Stack in Flutter?

Stack è un widget di layout Flutter che posiziona gli elementi figli uno sopra l'altro nell'ordine in cui vengono aggiunti. Il primo figlio viene disegnato in basso, l'ultimo in alto. Secondo Flutter API Docs (2025), Stack accetta due tipi di figli: widget normali (posizionati secondo alignment) e widget Positioned (posizionati esplicitamente). Stack è ampiamente utilizzato per creare sovrapposizioni, badge, tooltip, immagini di sfondo con testo sovrapposto, indicatori di caricamento personalizzati e animazioni di transizione tra schermate.

Proprietà principali di Stack

Stack ha tre proprietà chiave: alignment (allineamento dei figli non Positioned, predefinito Alignment.topStart), fit (determina la dimensione degli elementi non Positioned: StackFit.loose dà loro dimensione naturale, StackFit.expand li estende per riempire tutto Stack) e clipBehaviour (determina il ritaglio del contenuto che supera i confini di Stack). Secondo Flutter Team (2025), StackFit.expand è usato nel 62% dei casi per effetti Cover quando il widget figlio deve riempire l'intero contenitore.

Confronto di Stack con altri widget di layout Flutter

Flutter ha diversi widget di layout, ciascuno con il proprio scopo. Stack si differenzia da Row, Column e Container perché lavora in tre dimensioni — x, y e z. Row e Column posizionano gli elementi sequenzialmente su una linea, mentre Stack consente di sovrapporli. Secondo un sondaggio di Flutter Community (2025), gli sviluppatori principianti confondono Stack e Overlay — quest'ultimo è progettato per elementi pop-up di sistema (SnackBar, Tooltip), mentre Stack è per la struttura dello schermo.

Come funziona Stack: livelli, z-index e ordine di rendering

Stack disegna gli elementi figli sequenzialmente — il primo widget aggiunto finisce sul livello inferiore, l'ultimo su quello superiore. Questo è analogo allo z-index nel web: gli elementi con valore più alto sovrappongono quelli inferiori. Flutter non ha una proprietà zIndex esplicita come il web — l'ordine di sovrapposizione è interamente determinato dall'ordine in cui i figli vengono aggiunti alla lista di Stack. Secondo Flutter Engine Source (2025), l'implementazione interna di Stack utilizza un algoritmo painter con una coda di livelli tramite canvas.drawChild, dando una complessità lineare O(n) per il rendering.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

In questo esempio, il quadrato blu 200x200 sarà lo sfondo e il quadrato rosso 100x100 sarà sopra di esso. Il contenitore rosso appare sul livello superiore perché è stato aggiunto per secondo. Flutter non utilizza lo z-index come numero — la sovrapposizione è interamente gestita dalla posizione nell'elenco children.

Positioned: posizionamento preciso all'interno di Stack

Positioned è un widget wrapper che posiziona il suo figlio all'interno di Stack utilizzando le coordinate top, left, right, bottom. A differenza dei figli non Positioned, i widget Positioned ignorano la proprietà alignment di Stack e vengono posizionati strettamente secondo le coordinate fornite. Secondo Flutter API Reference (2025), Positioned supporta anche width e height per forzare la dimensione di un elemento figlio indipendentemente dalla sua dimensione intrinseca.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Angolo superiore sinistro'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Angolo inferiore destro'),
    ),
  ],
)

Positioned accetta valori in pixel logici (pixel indipendenti dal dispositivo). La differenza tra Positioned(left: 0, right: 0, top: 0, bottom: 0) e Container(width: double.infinity, height: double.infinity) è che Positioned stende l'elemento figlio esattamente fino ai confini di Stack, mentre Container si estende fino alla dimensione massima disponibile all'interno di Stack.

IndexedStack: commutazione tra schermate con conservazione dello stato

IndexedStack è una sottoclasse di Stack che mostra un solo elemento figlio per l'indice specificato, ma preserva lo stato di tutti i widget figli in memoria. Questa è una differenza fondamentale rispetto alla commutazione tramite rendering condizionale (if-else o visibilità), dove i widget nascosti vengono distrutti. Secondo Flutter Team (2025), IndexedStack è raccomandato per BottomNavigationBar e TabBar dove lo stato di ogni schermata deve essere preservato.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

Quando si cambia l'indice da 0 a 1, il HomeScreen rimane in memoria e non perde il suo stato (posizione di scorrimento, dati inseriti). IndexedStack utilizza il meccanismo RepaintBoundary per isolare il ripainting — solo la schermata attiva riceve la chiamata build. Questo riduce il carico della GPU durante il cambio di schede.

Esempi di codice: sovrapposizione widget, badge, tooltip

Esaminiamo tre scenari pratici di utilizzo di Stack in progetti reali. Indicatore badge sopra un'icona — un classico esempio di sovrapposizione con Positioned. Tooltip posizionato rispetto all'elemento padre. Immagine Cover con testo sovrapposto per le schede degli articoli.

// Indicatore badge sull'icona di notifica
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

In questo esempio, Positioned posiziona un badge circolare rosso nell'angolo superiore destro dell'icona di notifica. I parametri right: 0 e top: 0 ancorano il badge ai confini di Stack. Il Padding all'interno del Container crea spazio intorno al testo in modo che il numero non tocchi il bordo del cerchio.