Flexible: шта је то, принцип рада и подешавање у мобилном развоју

Шта је Flexible

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

Flexible користи Flex-алгоритам Flutter-а за израчунавање доступног простора. Прво фрејмворк испитује сву нефлексибилну децу (виџете без Flexible/Expanded) и израчунава њихов intrinsic size. Преостали простор се дели између флексибилне деце пропорционално њиховим flex-факторима. Након доделе простора, Flexible проверава fit — ако је loose, на дечји елемент се примењује ограничење „не више од додељеног", омогућавајући му да остане мали.

Особина Flexible-а: ако дечји виџет има сопствене минималне димензије (на пример, Text са дугачким низом знакова), Flexible додељује тражени простор, не растеже га присилно. То чини Flexible незаменљивим за елементе чију величину треба да одређује садржај, а не контејнер.

Закључак: користите Flexible када треба резервисати простор за елемент, али га не приморавати на растезање. То чува природне величине садржаја при флексибилном распоређивању изгледа.

FlexFit.tight vs FlexFit.loose

FlexFit — набрајање од две вредности: tight и loose. Од избора fit-а зависи да ли ће дечји виџет бити присилно растегнут до димензија додељеног простора.

FlexFit.tight: дечји елемент добија tight constraints — минимална и максимална величина су једнаке додељеном простору. Дете мора да заузме тачно онолико простора колико је Flex-алгоритам доделио. Ако је дете мање — растеже се. Ако је веће — стиска се. Понашање идентично Expanded-у.

FlexFit.loose: дечји елемент добија loose constraints — минимална величина је 0, максимална је једнака додељеном простору. Дете може бити било које величине од 0 до maximum. Ако је дете мало (на пример, Text са кратким низом знакова), заузима своју природну ширину, а остатак простора остаје празан.

Закључак: FlexFit.loose — избор за текстуалне блокове и елементе са природном величином. FlexFit.tight — за строге колонске распореде где сви елементи треба да буду исте ширине или висине.

Када користити Flexible уместо Expanded

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

Сценарио за Flexible: унутар Row-а налазе се два дугмета. Прво — „Купи" (кратак текст), друго — „Додај у корпу" (дугачак текст). Са Expanded оба дугмета ће се растегнути на једнаку ширину, а кратак текст ће имати огромне маргине. Са Flexible свако дугме ће заузети ширину свог текста, а слободан простор ће остати између њих или на ивицама.

Сценарио за Expanded: унутар Column-а налазе се три картице које треба да имају једнаку висину без обзира на садржај. Expanded равномерно дели доступну висину и свака картица се растеже на исту величину. Flexible са loose овде није прикладан — мала картица остаје мала, нарушавајући јединствени дизајн.

Закључак: бирајте Flexible када садржај одређује величину елемента и празан простор око њега је прихватљив. Бирајте Expanded када сви елементи треба да буду исте величине без обзира на садржај.

Примери кода са Flexible

Пример 1 демонстрира основну употребу Flexible са FlexFit.loose у Row-у.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('кратак'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('дуг текст за демо'),
      ),
    ),
  ],
)

У примеру оба Flexible са loose fit. Први контејнер са кратким текстом заузима своју природну ширину. Други са дугачким — своју. Row додељује сваком половину доступне ширине, али loose fit омогућава контејнерима да буду мањи, а слободан простор остаје празан између њих.

Пример 2 — поређење Flexible са Tight и Loose fit у Column-и.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — растегнут на пуну висину'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — природна висина'),
        ),
      ),
    ),
  ],
)

У Column-и први Flexible (tight) растеже Card на половину доступне висине. Други Flexible (loose) — Card заузима висину према садржају, а остатак простора остаје празан. Визуелно се види како tight присилно попуњава област, а loose чува компактну величину.

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

Типичне грешке при коришћењу Flexible

Грешка 1: коришћење Flexible ван Flex-контејнера. Као и Expanded, Flexible избацује LayoutException ако се не налази унутар Row, Column или Flex-а. Решење: увек проверавајте родитељски ланац виџета.

Грешка 2: мешање Flexible и Expanded. Програмери често користе Expanded када је потребан Flexible са loose fit, и обрнуто. Резултат: Expanded растеже елемент са кратким текстом, стварајући велика празна поља. Решење: ако величина елемента може бити мања од додељеног простора — користите Flexible(fit: FlexFit.loose).

Грешка 3: нулти flex-фактор. Flexible са flex=0 понаша се као нефлексибилан виџет, што може бити неочигледно. Програмер очекује флексибилно понашање, али елемент заузима минималну величину. Решење: flex треба да буде ≥1 за активно распоређивање простора.

Грешка 4: Flexible унутар ScrollView-а без ограничења величине. Ако се Flexible налази у Column-и унутар SingleChildScrollView-а, scroll-контејнер даје бесконачан простор и flex-расподела не ради. Решење: ограничите величину scroll-контејнера преко SizedBox или ConstrainedBox-а.

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