Flexible: cos'è, principio di funzionamento e configurazione nello sviluppo mobile

Cos'è Flexible

Flexible è un widget wrapper che fornisce spazio flessibile a un elemento figlio in un contenitore Flex. Flexible, come Expanded, partecipa alla distribuzione dello spazio libero, ma con una differenza chiave: il figlio di Flexible può occupare meno spazio di quello allocato se la sua dimensione è inferiore allo spazio disponibile.

Flexible utilizza l'algoritmo Flex di Flutter per calcolare lo spazio disponibile. Prima, il framework interroga tutti i figli non flessibili (widget senza Flexible/Expanded) e calcola la loro dimensione intrinseca. Lo spazio rimanente viene diviso tra i figli flessibili proporzionalmente ai loro fattori flex. Dopo l'allocazione dello spazio, Flexible verifica il fit — se è loose, il figlio riceve un vincolo di “non più grande dell'allocato”, permettendogli di rimanere piccolo.

Una caratteristica di Flexible: se il widget figlio ha le proprie dimensioni minime (ad esempio, Text con una stringa lunga), Flexible alloca lo spazio richiesto senza stiramento forzato. Questo rende Flexible indispensabile per elementi la cui dimensione deve essere determinata dal contenuto piuttosto che dal contenitore.

In sintesi: usa Flexible quando devi riservare spazio per un elemento ma senza forzarlo a stirarsi. Questo preserva le dimensioni naturali del contenuto mantenendo una distribuzione flessibile del layout.

FlexFit.tight vs FlexFit.loose

FlexFit è un'enumerazione di due valori: tight e loose. La scelta del fit determina se il widget figlio verrà stirato forzatamente alla dimensione dello spazio allocato.

FlexFit.tight: l'elemento figlio riceve tight constraints — le dimensioni minima e massima sono uguali allo spazio allocato. Il figlio deve occupare esattamente lo spazio che l'algoritmo Flex ha allocato. Se il figlio è più piccolo — si stira. Se è più grande — si restringe. Il comportamento è identico a Expanded.

FlexFit.loose: l'elemento figlio riceve loose constraints — la dimensione minima è 0, la massima è uguale allo spazio allocato. Il figlio può avere qualsiasi dimensione da 0 al massimo. Se il figlio è piccolo (ad esempio, Text con una stringa corta), occupa la sua larghezza naturale e lo spazio rimanente rimane vuoto.

In sintesi: FlexFit.loose è la scelta per blocchi di testo ed elementi con dimensione naturale. FlexFit.tight è per layout di colonna rigorosi dove tutti gli elementi devono avere la stessa larghezza o altezza.

Quando usare Flexible invece di Expanded

Flexible e Expanded sembrano simili ma risolvono compiti diversi. Expanded stira sempre il figlio per riempire tutto lo spazio disponibile. Flexible può lasciare spazio vuoto intorno al figlio se la dimensione del contenuto è inferiore alla porzione allocata.

Scenario per Flexible: all'interno di una Row ci sono due pulsanti. Il primo — “Acquista” (testo corto), il secondo — “Aggiungi al carrello” (testo lungo). Con Expanded, entrambi i pulsanti si stirano alla stessa larghezza e il testo corto avrà un padding enorme. Con Flexible, ogni pulsante occupa la larghezza del suo testo e lo spazio libero rimane tra di loro o ai bordi.

Scenario per Expanded: all'interno di una Column ci sono tre carte che devono occupare la stessa altezza indipendentemente dal contenuto. Expanded divide uniformemente l'altezza disponibile e ogni carta si stira alla stessa dimensione. Flexible con loose non funzionerebbe qui — una carta piccola rimarrebbe piccola, rompendo il design uniforme.

In sintesi: scegli Flexible quando il contenuto determina la dimensione dell'elemento e lo spazio vuoto intorno è accettabile. Scegli Expanded quando tutti gli elementi devono avere la stessa dimensione indipendentemente dal contenuto.

Esempi di codice con Flexible

Esempio 1 mostra l'uso base di Flexible con FlexFit.loose in una Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('corto'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('testo lungo per demo'),
      ),
    ),
  ],
)

Nell'esempio, entrambi i Flexible usano loose fit. Il primo contenitore con testo corto occupa la sua larghezza naturale. Il secondo con testo lungo — la propria. Row alloca a ciascuno metà della larghezza disponibile, ma loose fit permette ai contenitori di essere più piccoli e lo spazio libero rimane vuoto tra di loro.

Esempio 2 — confronto di Flexible con Tight e Loose fit in una Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — altezza totale stirata'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — altezza naturale'),
        ),
      ),
    ),
  ],
)

Nella Column, il primo Flexible (tight) stira la Card a metà dell'altezza disponibile. Il secondo Flexible (loose) — la Card occupa l'altezza secondo il suo contenuto e lo spazio rimanente rimane vuoto. Visivamente, si può vedere come tight riempie forzatamente l'area, mentre loose preserva una dimensione compatta.

In sintesi: nel codice di produzione, Flexible con loose è usato per campi modulo, pulsanti e blocchi di testo. Flexible con tight è equivalente a Expanded ed è usato per distribuzione uniforme.

Errori comuni nell'uso di Flexible

Errore 1: usare Flexible fuori da un contenitore Flex. Come Expanded, Flexible lancia una LayoutException se non è posizionato all'interno di Row, Column o Flex. Soluzione: controlla sempre la catena di widget padre.

Errore 2: confondere Flexible ed Expanded. Gli sviluppatori usano spesso Expanded quando serve Flexible con loose fit, e viceversa. Risultato: Expanded stira un elemento con testo corto, creando grandi margini vuoti. Soluzione: se la dimensione dell'elemento può essere più piccola dell'allocato — usa Flexible(fit: FlexFit.loose).

Errore 3: fattore flex zero. Flexible con flex=0 si comporta come un widget non flessibile, il che può essere poco intuitivo. Lo sviluppatore si aspetta un comportamento flessibile, ma l'elemento occupa la dimensione minima. Soluzione: flex deve essere ≥1 per una distribuzione attiva dello spazio.

Errore 4: Flexible all'interno di una ScrollView senza vincoli di dimensione. Se Flexible è in una Column dentro SingleChildScrollView, il contenitore di scroll fornisce spazio infinito e la distribuzione flex non funziona. Soluzione: vincola la dimensione del contenitore di scroll usando SizedBox o ConstrainedBox.

In sintesi: Flexible richiede la stessa attenzione al contesto padre di Expanded. L'unica differenza è il fit — sceglilo deliberatamente in base al compito.