Expanded: cos'è e come funziona in Flutter

Cos'è Expanded

Expanded è un widget wrapper che prende un figlio e lo costringe ad espandersi per riempire lo spazio disponibile in un contenitore Flex (Row, Column, Flex). Expanded non ha una propria rappresentazione visiva — gestisce solo i vincoli (constraints) passati all'elemento figlio.

Al centro di Expanded c'è il meccanismo Flex fornito dal framework Flutter. Quando Row o Column calcolano le dimensioni dei loro figli, prima allocano spazio agli elementi non flessibili (widget regolari con dimensioni fisse), poi distribuiscono lo spazio rimanente tra i figli Expanded e Flexible proporzionalmente ai loro fattori flex.

Expanded utilizza Flexible.fit = FlexFit.tight. Ciò significa che il figlio di Expanded deve occupare tutto lo spazio allocato, anche se la sua dimensione propria è più piccola. A differenza di Flexible con Fit.loose, dove il figlio può essere più piccolo dell'area allocata, Expanded estende forzatamente il contenuto.

Riepilogo: Expanded è lo strumento principale per creare layout proporzionali in Flutter. Usalo quando hai bisogno che un elemento riempia garantitamente tutta la larghezza o altezza disponibile.

Expanded vs Flexible: differenze principali

Expanded e Flexible distribuiscono entrambi lo spazio nei contenitori Flex, ma si comportano in modo fondamentalmente diverso. La differenza sta nella proprietà fit, che determina se il figlio può essere più piccolo dello spazio disponibile.

Expanded ha un modello di comportamento rigoroso: il suo fit è uguale a FlexFit.tight. Ciò significa che il widget figlio riceve vincoli pari allo spazio disponibile — né più, né meno. Se il figlio è più piccolo, si allunga. Se è più grande, si restringe. Flexible utilizza FlexFit.loose, permettendo all'elemento figlio di avere qualsiasi dimensione all'interno dello spazio allocato.

In pratica: se una Row contiene due Expanded con flex=1, ciascuno occuperà esattamente metà della larghezza. Se li sostituisci con Flexible con fit.loose, ogni figlio può essere più piccolo della metà se la sua dimensione propria è minore — lo spazio rimanente rimane vuoto.

Riepilogo: usa Expanded per layout proporzionali rigorosi, Flexible quando il figlio può essere più piccolo dello spazio disponibile. Se non sei sicuro — inizia con Expanded, offre un comportamento più prevedibile.

Fattore flex: come viene distribuito lo spazio

Fattore flex (parametro flex) è un valore numerico che determina la porzione di spazio disponibile che un Expanded riceverà. Per impostazione predefinita flex=1, il che significa distribuzione uniforme tra tutti i figli Expanded.

L'algoritmo di distribuzione funziona in tre fasi. Prima: Flutter calcola la dimensione intrinseca di tutti i figli non flessibili. Seconda: lo spazio rimanente viene diviso per la somma di tutti i fattori flex. Terza: ogni Expanded riceve una parte uguale al suo fattore flex moltiplicato per la dimensione di un'unità flex.

Ad esempio, una Row larga 300px contiene due Expanded: il primo con flex=2, il secondo con flex=1. Lo spazio libero (300px meno i figli non flessibili) viene diviso in 3 parti. Il primo riceve 2/3, il secondo riceve 1/3. Se non ci sono figli non flessibili, il primo riceve 200px, il secondo riceve 100px.

Il fattore flex può essere qualsiasi numero intero positivo. Il valore 0 è un caso speciale: Expanded con flex=0 si comporta come un widget non flessibile regolare, occupando lo spazio minimo in base alla dimensione del figlio. Questo comportamento è equivalente all'assenza di Expanded.

Riepilogo: il fattore flex è la chiave per costruire layout flessibili. Usa proporzioni 1:1 per colonne uguali, 2:1 per pannelli con area principale e laterale, 3:1 per interfacce con navigazione stretta.

Esempi di codice con Expanded

Esempio 1 dimostra l'uso base di Expanded in Row per creare tre colonne uguali.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

In questo esempio, tre Expanded con flex=1 (predefinito) dividono equamente la larghezza della Row. I contenitori si estendono all'altezza totale impostata dalla Row e occupano parti uguali. Questo approccio è utile per creare layout basati su colonne con distribuzione proporzionale.

Esempio 2 mostra l'uso di diversi fattori flex per creare un layout con barra laterale e contenuto principale.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Barra laterale'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Area di contenuto'),
        ),
      ),
    ),
  ],
)

Il secondo esempio crea un layout tipico con una barra laterale (25%) e un'area di contenuto principale (75%). flex=1 e flex=3 danno un rapporto 1:3. Quando la larghezza dello schermo cambia, le proporzioni vengono preservate automaticamente — questa è la base delle interfacce adattive.

Riepilogo: Expanded con diversi fattori flex è uno strumento standard per costruire layout adattivi. La combinazione di Expanded in Column consente di creare disposizioni proporzionali sia orizzontali che verticali.

Errori comuni nell'uso di Expanded

Errore 1: usare Expanded al di fuori di Row, Column o Flex. Se posizioni Expanded direttamente in Stack, ListView o un altro contenitore non Flex, Flutter lancia una LayoutException con il messaggio "Expanded widgets must be placed inside Flex widgets". Soluzione: controlla il widget padre — solo Row, Column o Flex.

Errore 2: posizionare Expanded all'interno di ListView senza specificare shrinkWrap. ListView per impostazione predefinita ha altezza infinita nella direzione di scorrimento, e Expanded non può calcolare la sua parte. Soluzione: usa shrinkWrap: true o avvolgi la ListView in un SizedBox con altezza fissa.

Errore 3: più Expanded con flex totale che supera lo spazio disponibile. Se una Row con larghezza limitata contiene Expanded oltre a widget con grande dimensione intrinseca, può verificarsi overflow. Soluzione: controlla le dimensioni minime dei figli non flessibili e usa FittedBox o Flex fit se necessario.

Errore 4: Expanded annidati in Column dentro Row. Se un Expanded all'interno di una Column contiene un altro Expanded all'interno di una Row, può sorgere un conflitto di vincoli. Soluzione: limita la profondità di annidamento o usa ConstrainedBox per impostare esplicitamente le dimensioni a livelli intermedi.

Riepilogo: Expanded richiede il contesto padre corretto. Controlla sempre che Expanded sia posizionato direttamente in Row, Column o Flex, ed evita annidamenti senza dimensioni esplicite.