Expanded: co to je, princip fungování ve Flutter

Co je Expanded

Expanded je obalový widget, který přijímá child a nutí jej roztáhnout se, aby vyplnil dostupný prostor v kontejneru Flex (Row, Column, Flex). Expanded nemá vlastní vizuální reprezentaci — pouze spravuje omezení předávaná podřízenému elementu.

Základem Expanded je mechanismus Flex poskytovaný frameworkem Flutter. Když Row nebo Column vypočítávají rozměry svých dětí, nejprve alokují prostor nepružným prvkům (běžným widgetům s pevnými rozměry) a zbývající prostor rozdělí mezi Expanded a Flexible děti proporcionálně podle jejich flex faktorů.

Expanded používá Flexible.fit = FlexFit.tight. To znamená, že dítě Expanded musí zabrat veškerý přidělený prostor, i když je jeho vlastní velikost menší. Na rozdíl od Flexible s Fit.loose, kde dítě může být menší než přidělená oblast, Expanded vynuceně roztahuje obsah.

Závěr: Expanded je hlavní nástroj pro vytváření proporcionálních rozvržení ve Flutter. Použijte jej, když chcete, aby prvek zaručeně zabral veškerou dostupnou šířku nebo výšku.

Expanded vs Flexible: klíčové rozdíly

Expanded a Flexible — oba distribuují prostor v kontejnerech Flex, ale chovají se zásadně odlišně. Rozdíl spočívá ve vlastnosti fit, která určuje, zda dítě může být menší než dostupný prostor.

Expanded má pevný model chování: jeho fit je roven FlexFit.tight. To znamená, že podřízený widget obdrží omezení rovná dostupnému prostoru — ani více, ani méně. Pokud je dítě menší, je roztaženo. Pokud je větší — je stlačeno. Flexible používá FlexFit.loose, což umožňuje podřízenému elementu být libovolné velikosti v rámci přiděleného prostoru.

V praxi: pokud jsou uvnitř Row dva Expanded s flex=1, každý zabere přesně polovinu šířky. Pokud je nahradíte Flexible s fit.loose, každé dítě může být menší než polovina, pokud je jeho vlastní velikost menší — zbývající prostor zůstane prázdný.

Závěr: používejte Expanded pro přísná proporcionální rozvržení, Flexible — když dítě může být menší než dostupný prostor. Pokud si nejste jisti — začněte s Expanded, poskytuje předvídatelnější chování.

Flex faktor: jak je prostor distribuován

Flex faktor (parametr flex) — číselná hodnota určující část dostupného prostoru, kterou Expanded získá. Výchozí hodnota je flex=1, což znamená rovnoměrné rozdělení mezi všechny Expanded děti.

Algoritmus distribuce funguje ve třech krocích. První: Flutter vypočítá intrinsic size všech nepružných dětí. Druhý: zbývající prostor se vydělí součtem všech flex faktorů. Třetí: každý Expanded obdrží část rovnající se jeho flex faktoru vynásobenému velikostí jedné jednotky flex.

Například Row o šířce 300px obsahuje dva Expanded: první s flex=2, druhý s flex=1. Volný prostor (300px minus nepružné děti) se rozdělí na 3 části. První získá 2/3, druhý — 1/3. Pokud nejsou žádné nepružné děti, první získá 200px, druhý — 100px.

Flex faktor může být libovolné kladné celé číslo. Hodnota 0 je zvláštní případ: Expanded s flex=0 se chová jako běžný nepružný widget, zabírající minimální prostor podle velikosti dítěte. Toto chování je ekvivalentní absenci Expanded.

Závěr: flex faktor je klíčem k vytváření flexibilních rozvržení. Používejte poměry 1:1 pro stejné sloupce, 2:1 pro panely s hlavní a boční oblastí, 3:1 pro rozhraní s úzkou navigací.

Příklady kódu s Expanded

Příklad 1 demonstruje základní použití Expanded v Row pro vytvoření tří stejných sloupců.

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

V tomto příkladu tři Expanded s flex=1 (výchozí) rozdělují šířku Row rovnoměrně. Kontejnery se roztahují na celou výšku nastavenou Row a zabírají stejné díly. Tento přístup je vhodný pro vytváření sloupcových rozvržení s proporcionálním rozdělením.

Příklad 2 ukazuje použití různých flex faktorů pro vytvoření rozvržení s bočním panelem a hlavním obsahem.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Boční panel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Oblast obsahu'),
        ),
      ),
    ),
  ],
)

Druhý příklad vytváří typické rozvržení s bočním panelem (25%) a hlavní oblastí (75%). flex=1 a flex=3 dávají poměr 1:3. Při změně šířky obrazovky se poměry automaticky zachovávají — to je základ adaptivních rozhraní.

Závěr: Expanded s různými flex faktory je standardní nástroj pro vytváření adaptivních rozvržení. Kombinace Expanded v Column umožňuje vytvářet jak horizontální, tak vertikální proporcionální uspořádání.

Typické chyby při použití Expanded

Chyba 1: použití Expanded mimo Row, Column nebo Flex. Pokud umístíte Expanded přímo do Stack, ListView nebo jiného kontejneru, který není Flex, Flutter vyhazuje LayoutException se zprávou „Expanded widgets must be placed inside Flex widgets”. Řešení: zkontrolujte rodičovský widget — pouze Row, Column nebo Flex.

Chyba 2: umístění Expanded uvnitř ListView bez zadání shrinkWrap. ListView má výchozí nekonečnou výšku ve směru rolování a Expanded nemůže vypočítat svůj podíl. Řešení: použijte shrinkWrap: true nebo zabalte ListView do SizedBox s pevnou výškou.

Chyba 3: několik Expanded s celkovým flex přesahujícím dostupný prostor. Pokud jsou uvnitř Row s omezenou šířkou Expanded a také widgety s velkým intrinsic size, může dojít k overflow. Řešení: zkontrolujte minimální rozměry nepružných dětí a v případě potřeby použijte FittedBox nebo Flex fit.

Chyba 4: vnořené Expanded v Column uvnitř Row. Pokud Expanded uvnitř Column obsahuje další Expanded uvnitř Row, může dojít ke konfliktu omezení. Řešení: omezte hloubku vnoření nebo použijte ConstrainedBox pro explicitní zadání rozměrů na mezilehlých úrovních.

Závěr: Expanded vyžaduje správný rodičovský kontext. Vždy kontrolujte, že Expanded je přímo v Row, Column nebo Flex a vyhněte se vnoření bez explicitních rozměrů.