Expanded: vad är det och funktionsprincip i Flutter

Vad är Expanded

Expanded är en omslags-widget som tar emot ett child och tvingar det att expandera för att fylla tillgängligt utrymme i en Flex-behållare (Row, Column, Flex). Expanded har ingen egen visuell representation — den hanterar bara de begränsningar som skickas vidare till det underordnade elementet.

Grunden för Expanded är mekanismen Flex som tillhandahålls av Flutter-ramverket. När Row eller Column beräknar måtten på sina barn, allokerar de först utrymme till icke-flexibla element (vanliga widgetar med fasta mått) och fördelar det återstående utrymmet mellan Expanded- och Flexible-barn proportionellt baserat på deras flex-faktorer.

Expanded använder Flexible.fit = FlexFit.tight. Detta innebär att Expanded-barnet måste uppta allt allokerat utrymme, även om dess egen storlek är mindre. Till skillnad från Flexible med Fit.loose, där barnet kan vara mindre än det allokerade området, tvingar Expanded fram en utsträckning av innehållet.

Slutsats: Expanded är det främsta verktyget för att skapa proportionella layouter i Flutter. Använd det när du vill att ett element garanterat ska uppta all tillgänglig bredd eller höjd.

Expanded vs Flexible: viktigaste skillnaderna

Expanded och Flexible — båda fördelar utrymme i Flex-behållare, men beter sig fundamentalt olika. Skillnaden ligger i egenskapen fit, som avgör om barnet kan vara mindre än tillgängligt utrymme.

Expanded har en stram beteendemodell: dess fit är lika med FlexFit.tight. Detta innebär att den underordnade widgeten får begränsningar lika med tillgängligt utrymme — varken mer eller mindre. Om barnet är mindre sträcks det ut. Om det är större — komprimeras det. Flexible använder FlexFit.loose, vilket tillåter det underordnade elementet att vara av valfri storlek inom det allokerade utrymmet.

I praktiken: om det finns två Expanded med flex=1 i en Row, kommer varje att uppta exakt hälften av bredden. Om du ersätter dem med Flexible med fit.loose, kan varje barn vara mindre än hälften om dess egen storlek är mindre — det återstående utrymmet förblir tomt.

Slutsats: använd Expanded för strikta proportionella layouter, Flexible — när barnet kan vara mindre än tillgängligt utrymme. Om du är osäker — börja med Expanded, det ger mer förutsägbart beteende.

Flex-faktor: hur utrymme fördelas

Flex-faktor (parametern flex) — ett numeriskt värde som bestämmer den del av tillgängligt utrymme som Expanded får. Som standard är flex=1, vilket innebär lika fördelning mellan alla Expanded-barn.

Fördelningsalgoritmen fungerar i tre steg. Första: Flutter beräknar intrinsic size för alla icke-flexibla barn. Andra: det återstående utrymmet delas med summan av alla flex-faktorer. Tredje: varje Expanded får en del lika med sin flex-faktor multiplicerad med storleken på en flex-enhet.

Till exempel, en Row med bredden 300px innehåller två Expanded: första med flex=2, andra med flex=1. Det lediga utrymmet (300px minus icke-flexibla barn) delas i 3 delar. Första får 2/3, andra — 1/3. Om det inte finns några icke-flexibla barn, får första 200px, andra — 100px.

Flex-faktor kan vara vilket positivt heltal som helst. Värdet 0 är ett speciellt fall: Expanded med flex=0 beter sig som en vanlig icke-flexibel widget och upptar minimalt utrymme enligt barnets storlek. Detta beteende är likvärdigt med frånvaro av Expanded.

Slutsats: flex-faktor är nyckeln till att bygga flexibla layouter. Använd proportionerna 1:1 för lika kolumner, 2:1 för paneler med huvud- och sidområde, 3:1 för gränssnitt med smal navigering.

Kodexempel med Expanded

Exempel 1 demonstrerar grundläggande användning av Expanded i Row för att skapa tre lika kolumner.

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

I detta exempel delar tre Expanded med flex=1 (standard) bredden på Row lika. Behållarna sträcker sig till hela höjden som satts av Row och upptar lika delar. Detta tillvägagångssätt är praktiskt för att skapa kolumnlayouter med proportionell fördelning.

Exempel 2 visar användning av olika flex-faktorer för att skapa en layout med sidopanel och huvudinnehåll.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Sidopanel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Innehållsområde'),
        ),
      ),
    ),
  ],
)

Det andra exemplet skapar en typisk layout med sidopanel (25%) och huvudområde (75%). flex=1 och flex=3 ger förhållandet 1:3. När skärmbredden ändras bevaras proportionerna automatiskt — detta är grunden för adaptiva gränssnitt.

Slutsats: Expanded med olika flex-faktorer är standardverktyget för att bygga adaptiva layouter. Kombinationen av Expanded i Column möjliggör både horisontella och vertikala proportionella arrangemang.

Typiska fel vid användning av Expanded

Fel 1: användning av Expanded utanför Row, Column eller Flex. Om du placerar Expanded direkt i Stack, ListView eller annan behållare som inte är Flex, kastar Flutter LayoutException med meddelandet „Expanded widgets must be placed inside Flex widgets”. Lösning: kontrollera förälder-widgeten — endast Row, Column eller Flex.

Fel 2: placering av Expanded inuti ListView utan att ange shrinkWrap. ListView har som standard oändlig höjd i rullningsriktningen och Expanded kan inte beräkna sin del. Lösning: använd shrinkWrap: true eller linda ListView i en SizedBox med fast höjd.

Fel 3: flera Expanded med total flex som överstiger tillgängligt utrymme. Om det i en Row med begränsad bredd finns Expanded samt widgetar med stor intrinsic size, kan overflow uppstå. Lösning: kontrollera minimimåtten för icke-flexibla barn och använd vid behov FittedBox eller Flex fit.

Fel 4: nästlade Expanded i Column inuti Row. Om Expanded inuti Column innehåller en annan Expanded inuti Row, kan en konflikt av begränsningar uppstå. Lösning: begränsa nästlingsdjupet eller använd ConstrainedBox för explicit angivelse av mått på mellanliggande nivåer.

Slutsats: Expanded kräver korrekt förälderkontext. Kontrollera alltid att Expanded är direkt i Row, Column eller Flex och undvik nästling utan explicita mått.