Expanded: ano ito, prinsipyo ng paggana sa Flutter

Ano ang Expanded

Expanded ay isang wrapper widget na tumatanggap ng child at pinipilit itong lumawak upang punan ang available na espasyo sa Flex container (Row, Column, Flex). Ang Expanded ay walang sariling visual na representasyon — pinamamahalaan lamang nito ang mga constraints na ipinapasa sa elementong anak.

Sa puso ng Expanded ay ang mekanismong Flex na ibinibigay ng Flutter framework. Kapag kinakalkula ng Row o Column ang mga sukat ng kanilang mga anak, una silang naglalaan ng espasyo sa mga hindi flexible na elemento (karaniwang widget na may nakapirming sukat), at ang natitirang espasyo ay ipinamamahagi sa pagitan ng Expanded at Flexible na mga anak nang proporsyonal sa kanilang mga flex factor.

Ang Expanded ay gumagamit ng Flexible.fit = FlexFit.tight. Nangangahulugan ito na ang anak ng Expanded ay dapat sumakop sa lahat ng inilaang espasyo, kahit na ang sarili nitong sukat ay mas maliit. Hindi tulad ng Flexible na may Fit.loose, kung saan ang anak ay maaaring mas maliit kaysa sa inilaang lugar, pinipilit ng Expanded ang pag-unat ng nilalaman.

Konklusyon: Ang Expanded ay ang pangunahing kasangkapan para sa paggawa ng proporsyonal na mga layout sa Flutter. Gamitin ito kapag gusto mong garantisadong sakupin ng elemento ang lahat ng available na lapad o taas.

Expanded vs Flexible: mga pangunahing pagkakaiba

Expanded at Flexible — parehong namamahagi ng espasyo sa mga Flex container, ngunit magkaiba ang kanilang pag-uugali. Ang pagkakaiba ay nasa property na fit, na tumutukoy kung ang anak ay maaaring mas maliit kaysa sa available na espasyo.

Ang Expanded ay may mahigpit na modelo ng pag-uugali: ang fit nito ay katumbas ng FlexFit.tight. Nangangahulugan ito na ang widget na anak ay tumatanggap ng constraints na katumbas ng available na espasyo — hindi hihigit, hindi kukulang. Kung ang anak ay mas maliit, ito ay inuunat. Kung mas malaki — ito ay pinipiga. Ang Flexible ay gumagamit ng FlexFit.loose, na nagpapahintulot sa elementong anak na maging kahit anong laki sa loob ng inilaang espasyo.

Sa praktika: kung sa loob ng Row ay may dalawang Expanded na may flex=1, bawat isa ay sasakop ng eksaktong kalahati ng lapad. Kung papalitan mo sila ng Flexible na may fit.loose, ang bawat anak ay maaaring mas maliit sa kalahati kung ang sarili nitong sukat ay mas maliit — ang natitirang espasyo ay mananatiling walang laman.

Konklusyon: gamitin ang Expanded para sa mahigpit na proporsyonal na mga layout, Flexible — kapag ang anak ay maaaring mas maliit kaysa sa available na espasyo. Kung hindi ka sigurado — magsimula sa Expanded, nagbibigay ito ng mas predictable na pag-uugali.

Flex factor: paano ipinamamahagi ang espasyo

Flex factor (parameter na flex) — isang numerikong halaga na tumutukoy sa bahagi ng available na espasyo na matatanggap ng Expanded. Bilang default flex=1, na nangangahulugang pantay na pamamahagi sa lahat ng Expanded na anak.

Ang algorithm ng pamamahagi ay gumagana sa tatlong hakbang. Una: kinakalkula ng Flutter ang intrinsic size ng lahat ng hindi flexible na anak. Ikalawa: ang natitirang espasyo ay hinati sa kabuuan ng lahat ng flex factor. Ikatlo: bawat Expanded ay tumatanggap ng bahagi na katumbas ng flex factor nito na pinarami ng laki ng isang unit ng flex.

Halimbawa, isang Row na may lapad na 300px ay naglalaman ng dalawang Expanded: una na may flex=2, pangalawa na may flex=1. Ang libreng espasyo (300px minus hindi flexible na mga anak) ay hinati sa 3 bahagi. Ang una ay makakakuha ng 2/3, ang pangalawa — 1/3. Kung walang hindi flexible na mga anak, ang una ay makakakuha ng 200px, ang pangalawa — 100px.

Ang flex factor ay maaaring maging anumang positibong integer. Ang halagang 0 ay isang espesyal na kaso: ang Expanded na may flex=0 ay kumikilos tulad ng isang ordinaryong hindi flexible na widget, sumasakop ng minimal na espasyo ayon sa laki ng anak. Ang pag-uugaling ito ay katumbas ng kawalan ng Expanded.

Konklusyon: ang flex factor ay ang susi sa pagbuo ng mga flexible na layout. Gamitin ang mga ratio na 1:1 para sa pantay na mga column, 2:1 para sa mga panel na may pangunahing at gilid na lugar, 3:1 para sa mga interface na may makitid na nabigasyon.

Mga halimbawa ng code na may Expanded

Halimbawa 1 ay nagpapakita ng pangunahing paggamit ng Expanded sa Row para sa paggawa ng tatlong pantay na column.

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

Sa halimbawang ito, tatlong Expanded na may flex=1 (default) ang naghahati sa lapad ng Row nang pantay. Ang mga container ay umuunat sa buong taas na itinakda ng Row at sumasakop ng pantay na mga bahagi. Ang ganitong paraan ay maginhawa para sa paggawa ng mga column layout na may proporsyonal na pamamahagi.

Halimbawa 2 ay nagpapakita ng paggamit ng iba't ibang flex factor para sa paggawa ng layout na may side panel at pangunahing nilalaman.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Side panel'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Lugar ng nilalaman'),
        ),
      ),
    ),
  ],
)

Ang pangalawang halimbawa ay gumagawa ng tipikal na layout na may side panel (25%) at pangunahing lugar (75%). Ang flex=1 at flex=3 ay nagbibigay ng ratio na 1:3. Kapag nagbago ang lapad ng screen, ang mga proporsyon ay awtomatikong pinapanatili — ito ang batayan ng mga adaptibong interface.

Konklusyon: ang Expanded na may iba't ibang flex factor ay ang karaniwang kasangkapan para sa pagbuo ng mga adaptibong layout. Ang pagsasama ng Expanded sa Column ay nagpapahintulot sa paggawa ng parehong pahalang at patayong proporsyonal na pag-aayos.

Mga karaniwang pagkakamali sa paggamit ng Expanded

Pagkakamali 1: paggamit ng Expanded sa labas ng Row, Column, o Flex. Kung ilalagay mo ang Expanded nang direkta sa Stack, ListView, o iba pang container na hindi Flex, ang Flutter ay nagtatapon ng LayoutException na may mensaheng “Expanded widgets must be placed inside Flex widgets”. Solusyon: suriin ang parent widget — tanging Row, Column, o Flex lamang.

Pagkakamali 2: paglalagay ng Expanded sa loob ng ListView nang hindi tinutukoy ang shrinkWrap. Ang ListView bilang default ay may walang katapusang taas sa direksyon ng pag-scroll, at hindi makalkula ng Expanded ang bahagi nito. Solusyon: gamitin ang shrinkWrap: true o balutin ang ListView sa SizedBox na may nakapirming taas.

Pagkakamali 3: maraming Expanded na may kabuuang flex na lumalampas sa available na espasyo. Kung sa loob ng Row na may limitadong lapad ay may mga Expanded, pati na rin mga widget na may malaking intrinsic size, maaaring magkaroon ng overflow. Solusyon: suriin ang pinakamababang sukat ng hindi flexible na mga anak at kung kinakailangan gamitin ang FittedBox o Flex fit.

Pagkakamali 4: nested Expanded sa Column sa loob ng Row. Kung ang Expanded sa loob ng Column ay naglalaman ng isa pang Expanded sa loob ng Row, maaaring magkaroon ng conflict ng constraints. Solusyon: limitahan ang lalim ng nesting o gamitin ang ConstrainedBox para sa tahasang pagtatakda ng mga sukat sa mga intermediate na antas.

Konklusyon: ang Expanded ay nangangailangan ng tamang konteksto ng magulang. Palaging suriin na ang Expanded ay direktang nasa Row, Column, o Flex at iwasan ang nesting nang walang tahasang sukat.