Expanded: wat is het, werkingsprincipe in Flutter

Wat is Expanded

Expanded is een wrapper-widget die een child accepteert en dwingt uit te breiden om de beschikbare ruimte in een Flex-container (Row, Column, Flex) te vullen. Expanded heeft geen eigen visuele weergave — het beheert alleen de constraints die naar het onderliggende element worden doorgegeven.

Aan de basis van Expanded ligt het Flex-mechanisme dat door het Flutter-framework wordt geleverd. Wanneer Row of Column de afmetingen van hun kinderen berekenen, wijzen ze eerst ruimte toe aan niet-flexibele elementen (gewone widgets met vaste afmetingen) en verdelen de resterende ruimte tussen Expanded- en Flexible-kinderen proportioneel op basis van hun flex-factoren.

Expanded gebruikt Flexible.fit = FlexFit.tight. Dit betekent dat het kind van Expanded alle toegewezen ruimte moet innemen, zelfs als zijn eigen afmeting kleiner is. In tegenstelling tot Flexible met Fit.loose, waar het kind kleiner kan zijn dan het toegewezen gebied, rekt Expanded de inhoud dwingend op.

Conclusie: Expanded is het belangrijkste hulpmiddel voor het maken van proportionele layouts in Flutter. Gebruik het wanneer u wilt dat een element gegarandeerd alle beschikbare breedte of hoogte inneemt.

Expanded vs Flexible: belangrijkste verschillen

Expanded en Flexible — beide verdelen ruimte in Flex-containers, maar gedragen zich fundamenteel anders. Het verschil zit in de eigenschap fit, die bepaalt of het kind kleiner kan zijn dan de beschikbare ruimte.

Expanded heeft een strak gedragsmodel: zijn fit is gelijk aan FlexFit.tight. Dit betekent dat de onderliggende widget constraints ontvangt die gelijk zijn aan de beschikbare ruimte — niet meer, niet minder. Als het kind kleiner is, wordt het opgerekt. Als het groter is, wordt het samengedrukt. Flexible gebruikt FlexFit.loose, waardoor het onderliggende element elke grootte kan hebben binnen de toegewezen ruimte.

In de praktijk: als er zich twee Expanded met flex=1 in een Row bevinden, neemt elk precies de helft van de breedte in. Als u ze vervangt door Flexible met fit.loose, kan elk kind kleiner zijn dan de helft als zijn eigen afmeting kleiner is — de resterende ruimte blijft leeg.

Conclusie: gebruik Expanded voor strikte proportionele layouts, Flexible — wanneer het kind kleiner kan zijn dan de beschikbare ruimte. Als u niet zeker bent — begin met Expanded, het geeft voorspelbaarder gedrag.

Flex-factor: hoe ruimte wordt verdeeld

Flex-factor (parameter flex) — een numerieke waarde die het deel van de beschikbare ruimte bepaalt dat Expanded krijgt. Standaard is flex=1, wat gelijke verdeling over alle Expanded-kinderen betekent.

Het verdelingsalgoritme werkt in drie stappen. Eerste: Flutter berekent de intrinsic size van alle niet-flexibele kinderen. Tweede: de resterende ruimte wordt gedeeld door de som van alle flex-factoren. Derde: elk Expanded krijgt een deel gelijk aan zijn flex-factor vermenigvuldigd met de grootte van één flex-eenheid.

Bijvoorbeeld, een Row van 300px breed bevat twee Expanded: eerste met flex=2, tweede met flex=1. De vrije ruimte (300px minus niet-flexibele kinderen) wordt in 3 delen verdeeld. De eerste krijgt 2/3, de tweede — 1/3. Als er geen niet-flexibele kinderen zijn, krijgt de eerste 200px, de tweede — 100px.

Flex-factor kan elk positief geheel getal zijn. De waarde 0 is een speciaal geval: Expanded met flex=0 gedraagt zich als een gewone niet-flexibele widget en neemt minimale ruimte in op basis van de grootte van het kind. Dit gedrag is gelijk aan de afwezigheid van Expanded.

Conclusie: flex-factor is de sleutel tot het bouwen van flexibele layouts. Gebruik verhoudingen 1:1 voor gelijke kolommen, 2:1 voor panelen met een hoofd- en zijgebied, 3:1 voor interfaces met smalle navigatie.

Codevoorbeelden met Expanded

Voorbeeld 1 demonstreert het basisgebruik van Expanded in Row voor het maken van drie gelijke kolommen.

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

In dit voorbeeld verdelen drie Expanded met flex=1 (standaard) de breedte van Row gelijkmatig. De containers rekken uit tot de volledige hoogte ingesteld door Row en nemen gelijke delen in. Deze benadering is handig voor het maken van kolomlayouts met proportionele verdeling.

Voorbeeld 2 toont het gebruik van verschillende flex-factoren voor het maken van een layout met een zijpaneel en hoofdinhoud.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Zijpaneel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Inhoudsgebied'),
        ),
      ),
    ),
  ],
)

Het tweede voorbeeld creëert een typische layout met een zijpaneel (25%) en hoofdgebied (75%). flex=1 en flex=3 geven de verhouding 1:3. Bij verandering van de schermbreedte worden de verhoudingen automatisch behouden — dit is de basis van adaptieve interfaces.

Conclusie: Expanded met verschillende flex-factoren is het standaardinstrument voor het bouwen van adaptieve layouts. Combinatie van Expanded in Column maakt zowel horizontale als verticale proportionele indelingen mogelijk.

Typische fouten bij gebruik van Expanded

Fout 1: gebruik van Expanded buiten Row, Column of Flex. Als u Expanded rechtstreeks in Stack, ListView of een andere container plaatst die geen Flex is, gooit Flutter een LayoutException met de melding „Expanded widgets must be placed inside Flex widgets”. Oplossing: controleer de bovenliggende widget — alleen Row, Column of Flex.

Fout 2: plaatsen van Expanded in ListView zonder shrinkWrap op te geven. ListView heeft standaard oneindige hoogte in de richting van scrollen en Expanded kan zijn aandeel niet berekenen. Oplossing: gebruik shrinkWrap: true of wikkel ListView in een SizedBox met vaste hoogte.

Fout 3: meerdere Expanded met totale flex die de beschikbare ruimte overschrijdt. Als er zich in een Row met beperkte breedte Expanded bevinden, evenals widgets met grote intrinsic size, kan er overflow optreden. Oplossing: controleer de minimale afmetingen van niet-flexibele kinderen en gebruik indien nodig FittedBox of Flex fit.

Fout 4: geneste Expanded in Column binnen Row. Als Expanded in Column een andere Expanded in Row bevat, kan er een conflict van constraints ontstaan. Oplossing: beperk de nestdiepte of gebruik ConstrainedBox voor expliciete maataanduiding op tussenliggende niveaus.

Conclusie: Expanded vereist de juiste bovenliggende context. Controleer altijd dat Expanded zich direct in Row, Column of Flex bevindt en vermijd nesting zonder expliciete afmetingen.