Expanded: шта је то, принцип рада у Flutter-у

Шта је Expanded

Expanded је виџет-омотач који прима child и приморава га да се прошири како би испунио расположиви простор у Flex контејнеру (Row, Column, Flex). Expanded нема сопствену визуелну репрезентацију — он само управља constraints-има који се преносе подређеном елементу.

У основи Expanded-а лежи механизам Flex који обезбеђује Flutter оквир. Када Row или Column израчунавају димензије своје деце, прво додељују простор нееластичним елементима (обичним виџетима са фиксним димензијама), а преостали простор расподељују између Expanded и Flexible деце пропорционално њиховим flex факторима.

Expanded користи Flexible.fit = FlexFit.tight. То значи да дете Expanded-а мора да заузме сав додељени простор, чак и ако је његова сопствена величина мања. За разлику од Flexible-а са Fit.loose, где дете може бити мање од додељене области, Expanded присилно растеже садржај.

Закључак: Expanded је основни алат за креирање пропорционалних распореда у Flutter-у. Користите га када желите да елемент гарантовано заузме сву расположиву ширину или висину.

Expanded vs Flexible: кључне разлике

Expanded и Flexible — оба расподељују простор у Flex контејнерима, али се понашају суштински различито. Разлика је у својству fit, које одређује да ли дете може бити мање од расположивог простора.

Expanded има крут модел понашања: његов fit је једнак FlexFit.tight. То значи да подређени виџет добија constraints једнаке расположивом простору — ни више, ни мање. Ако је дете мање, растеже се. Ако је веће — сабија се. Flexible користи FlexFit.loose, дозвољавајући подређеном елементу да буде било које величине у оквиру додељеног простора.

У пракси: ако се унутар Row-а налазе два Expanded-а са flex=1, сваки ће заузети тачно половину ширине. Ако их замените Flexible-ом са fit.loose, свако дете може бити мање од половине, ако је његова сопствена величина мања — преостали простор ће остати празан.

Закључак: користите Expanded за строге пропорционалне распореде, Flexible — када дете може бити мање од расположивог простора. Ако нисте сигурни — почните са Expanded-ом, он даје предвидљивије понашање.

Flex фактор: како се простор расподељује

Flex фактор (параметар flex) — нумеричка вредност која одређује део расположивог простора који ће добити Expanded. Подразумевано flex=1, што значи равномерну расподелу између свих Expanded деце.

Алгоритам расподеле ради у три корака. Први: Flutter израчунава intrinsic size све нееластичне деце. Други: преостали простор се дели на збир свих flex фактора. Трећи: сваки Expanded добија део једнак свом flex фактору помноженом са величином једне flex јединице.

На пример, Row ширине 300px садржи два Expanded-а: први са flex=2, други са flex=1. Слободан простор (300px минус нееластична деца) дели се на 3 дела. Први добија 2/3, други — 1/3. Ако нема нееластичне деце, први ће добити 200px, други — 100px.

Flex фактор може бити било који позитиван цео број. Вредност 0 је посебан случај: Expanded са flex=0 понаша се као обичан нееластичан виџет, заузимајући минималан простор према величини детета. Ово понашање је еквивалентно одсуству Expanded-а.

Закључак: flex фактор је кључ за изградњу флексибилних распореда. Користите односе 1:1 за једнаке колоне, 2:1 за панеле са главном и бочном облашћу, 3:1 за интерфејсе са уском навигацијом.

Примери кода са Expanded-ом

Пример 1 демонстрира основну употребу Expanded-а у Row-у за креирање три једнаке колоне.

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

У овом примеру три Expanded-а са flex=1 (подразумевано) деле ширину Row-а подједнако. Контејнери се растежу на целу висину коју је поставио Row и заузимају једнаке делове. Овај приступ је погодан за креирање колонских распореда са пропорционалном расподелом.

Пример 2 показује употребу различитих flex фактора за креирање распореда са бочним панелом и главним садржајем.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Бочни панел'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Област садржаја'),
        ),
      ),
    ),
  ],
)

Други пример креира типичан layout са бочним панелом (25%) и главном облашћу (75%). flex=1 и flex=3 дају однос 1:3. При промени ширине екрана пропорције се аутоматски чувају — то је основа адаптивних интерфејса.

Закључак: Expanded са различитим flex факторима је стандардни алат за изградњу адаптивних распореда. Комбинација Expanded-а у Column-у омогућава креирање и хоризонталних и вертикалних пропорционалних распореда.

Типичне грешке при коришћењу Expanded-а

Грешка 1: коришћење Expanded-а ван Row-а, Column-а или Flex-а. Ако поставите Expanded директно у Stack, ListView или други контејнер који није Flex, Flutter баца LayoutException са поруком „Expanded widgets must be placed inside Flex widgets”. Решење: проверавајте родитељски виџет — само Row, Column или Flex.

Грешка 2: постављање Expanded-а унутар ListView-а без навођења shrinkWrap. ListView подразумевано има бесконачну висину у правцу скроловања и Expanded не може израчунати свој удео. Решење: користите shrinkWrap: true или умотајте ListView у SizedBox са фиксном висином.

Грешка 3: више Expanded-а са укупним flex-ом који премашује расположиви простор. Ако се унутар Row-а са ограниченом ширином налазе Expanded, као и виџети са великим intrinsic size, може доћи до overflow-а. Решење: проверавајте минималне димензије нееластичне деце и по потреби користите FittedBox или Flex fit.

Грешка 4: угнежђени Expanded у Column-у унутар Row-а. Ако Expanded унутар Column-а садржи други Expanded унутар Row-а, може доћи до конфликта constraints-а. Решење: ограничавајте дубину угнежђења или користите ConstrainedBox за експлицитно задавање димензија на међунивоима.

Закључак: Expanded захтева правилан родитељски контекст. Увек проверавајте да се Expanded налази директно у Row-у, Column-у или Flex-у и избегавајте угнежђење без експлицитних димензија.