Flexible: wat is het, werkingsprincipe en configuratie in mobiele ontwikkeling

Wat is Flexible

Flexible — een wrapper-widget die het onderliggende element flexibele ruimte biedt in een Flex-container. Flexible neemt, net als Expanded, deel aan de verdeling van vrije ruimte, maar met een belangrijk verschil: het kind van Flexible kan minder ruimte innemen dan toegewezen, als zijn eigen grootte kleiner is dan de beschikbare ruimte.

Flexible gebruikt het Flex-algoritme van Flutter om de beschikbare ruimte te berekenen. Eerst bevraagt het framework alle niet-flexibele kinderen (widgets zonder Flexible/Expanded) en berekent hun intrinsic size. De overgebleven ruimte wordt verdeeld over de flexibele kinderen in verhouding tot hun flex-factor. Na toewijzing van de ruimte controleert Flexible de fit — als deze loose is, wordt een beperking “niet meer dan toegewezen” toegepast op het onderliggende element, waardoor het klein kan blijven.

Eigenschap van Flexible: als de onderliggende widget eigen minimale afmetingen heeft (bijvoorbeeld Text met een lange tekenreeks), wijst Flexible de gevraagde ruimte toe, zonder geforceerd uit te rekken. Dit maakt Flexible onmisbaar voor elementen waarvan de grootte door de inhoud moet worden bepaald, niet door de container.

Conclusie: gebruik Flexible wanneer u ruimte voor een element wilt reserveren, maar het niet wilt dwingen uit te rekken. Dit behoudt de natuurlijke afmetingen van de inhoud bij een flexibele layoutverdeling.

FlexFit.tight vs FlexFit.loose

FlexFit — een opsomming van twee waarden: tight en loose. Van de keuze van fit hangt af of de onderliggende widget geforceerd wordt uitgerekt tot de afmetingen van de toegewezen ruimte.

FlexFit.tight: het onderliggende element krijgt tight constraints — minimale en maximale afmetingen zijn gelijk aan de toegewezen ruimte. Het kind moet precies zoveel ruimte innemen als het Flex-algoritme heeft toegewezen. Als het kind kleiner is — wordt het uitgerekt. Als het groter is — wordt het samengedrukt. Gedrag identiek aan Expanded.

FlexFit.loose: het onderliggende element krijgt loose constraints — minimale afmeting is 0, maximale is gelijk aan de toegewezen ruimte. Het kind kan elke grootte hebben van 0 tot maximum. Als het kind klein is (bijvoorbeeld Text met een korte tekenreeks), neemt het zijn natuurlijke breedte in en blijft de rest van de ruimte leeg.

Conclusie: FlexFit.loose — keuze voor tekstblokken en elementen met natuurlijke grootte. FlexFit.tight — voor strikte kolomindelingen waar alle elementen dezelfde breedte of hoogte moeten hebben.

Wanneer Flexible gebruiken in plaats van Expanded

Flexible en Expanded zien er vergelijkbaar uit, maar lossen verschillende taken op. Expanded rekt het kind altijd uit over de volledige beschikbare ruimte. Flexible kan lege ruimte rond het kind laten als de inhoud kleiner is dan het toegewezen aandeel.

Scenario voor Flexible: in een Row bevinden zich twee knoppen. De eerste — “Kopen” (korte tekst), de tweede — “Aan winkelwagen toevoegen” (lange tekst). Met Expanded worden beide knoppen uitgerekt tot dezelfde breedte en krijgt de korte tekst enorme marges. Met Flexible neemt elke knop de breedte van zijn tekst in en blijft de vrije ruimte ertussen of aan de randen.

Scenario voor Expanded: in een Column bevinden zich drie kaarten die ongeacht de inhoud dezelfde hoogte moeten hebben. Expanded verdeelt de beschikbare hoogte gelijkmatig en elke kaart wordt uitgerekt tot dezelfde grootte. Flexible met loose is hier niet geschikt — een kleine kaart blijft klein en verstoort het uniforme ontwerp.

Conclusie: kies Flexible wanneer de inhoud de grootte van het element bepaalt en lege ruimte eromheen acceptabel is. Kies Expanded wanneer alle elementen dezelfde grootte moeten hebben ongeacht de inhoud.

Codevoorbeelden met Flexible

Voorbeeld 1 toont het basisgebruik van Flexible met FlexFit.loose in een Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('kort'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('lange tekst voor demo'),
      ),
    ),
  ],
)

In het voorbeeld beide Flexible met loose fit. De eerste container met korte tekst neemt zijn natuurlijke breedte in. De tweede met lange tekst — de zijne. Row wijst elk de helft van de beschikbare breedte toe, maar loose fit laat de containers kleiner zijn en de vrije ruimte blijft leeg ertussen.

Voorbeeld 2 — vergelijking van Flexible met Tight en Loose fit in een Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — uitgerekt op volledige hoogte'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — natuurlijke hoogte'),
        ),
      ),
    ),
  ],
)

In de Column rekt de eerste Flexible (tight) de Card uit over de helft van de beschikbare hoogte. De tweede Flexible (loose) — de Card neemt hoogte op basis van de inhoud en de rest van de ruimte blijft leeg. Visueel is te zien hoe tight het gebied geforceerd vult en loose de compacte grootte behoudt.

Conclusie: in productiecode wordt Flexible met loose toegepast voor formuliervelden, knoppen en tekstblokken. Flexible met tight — equivalent van Expanded, gebruikt voor gelijkmatige verdeling.

Veelgemaakte fouten bij het gebruik van Flexible

Fout 1: Flexible gebruiken buiten een Flex-container. Net als Expanded gooit Flexible een LayoutException als het niet binnen Row, Column of Flex staat. Oplossing: controleer altijd de ouderketen van widgets.

Fout 2: Verwarring tussen Flexible en Expanded. Ontwikkelaars gebruiken vaak Expanded wanneer Flexible met loose fit nodig is en omgekeerd. Resultaat: Expanded rekt het element met korte tekst uit, waardoor grote lege velden ontstaan. Oplossing: als de grootte van het element kleiner kan zijn dan de toegewezen ruimte — gebruik Flexible(fit: FlexFit.loose).

Fout 3: Nul flex-factor. Flexible met flex=0 gedraagt zich als een niet-flexibele widget, wat niet voor de hand ligt. De ontwikkelaar verwacht flexibel gedrag, maar het element neemt de minimale grootte in. Oplossing: flex moet ≥1 zijn voor actieve ruimteverdeling.

Fout 4: Flexible binnen ScrollView zonder groottebeperking. Als Flexible zich in een Column binnen SingleChildScrollView bevindt, geeft de scroll-container oneindige ruimte en werkt de flex-verdeling niet. Oplossing: beperk de grootte van de scroll-container via SizedBox of ConstrainedBox.

Conclusie: Flexible vereist dezelfde aandacht voor de oudercontext als Expanded. Het verschil zit alleen in fit — kies bewust op basis van de taak.