◆ Sparround

Layout və constraints

Flutter layout-un bir cümləlik qaydası var və rəsmi sənəd onu belə yazır: constraints go down, sizes go up, parent sets position — məhdudiyyətlər aşağı gedir, ölçülər yuxarı qayıdır, mövqeyi valideyn təyin edir.

Praktikada bu belə işləyir:

  • Valideyn uşağa BoxConstraints verir: minimum/maksimum en və hündürlük
  • Uşaq həmin çərçivə daxilində öz ölçüsünü seçir və valideynə qaytarır
  • Valideyn uşağı öz daxilində yerləşdirir

Buradan çıxan ən vacib nəticə: uşaq öz mövqeyini bilmir və valideynin ölçüsünü öyrənə bilmir. "Bu widget-i ekranın 30%-i qədər et" kimi istəklər ona görə birbaşa alınmır — Expanded, FractionallySizedBox və ya LayoutBuilder lazım olur.

Row və Column Flex widget-ləridir: uşaqları bir ox boyunca düzürlər.

  • mainAxisAlignment — əsas ox boyunca (Row üçün üfüqi, Column üçün şaquli)
  • crossAxisAlignment — perpendikulyar ox boyunca
  • mainAxisSize — Flex bütün boş yeri tutsun (max, default) yoxsa uşaqlar qədər yer tutsun (min)

`Expanded` və `Flexible` fərqi interview-də tez-tez soruşulur: hər ikisi qalan boş yeri paylayır, amma Expanded uşağı həmin yeri tam doldurmağa məcbur edir (fit: FlexFit.tight), Flexible isə uşağa daha az yer tutmağa icazə verir (FlexFit.loose).

ProblemSəbəbHəll
Sarı-qara zolaqlı "RenderFlex overflowed"Uşaqlar valideynin verdiyi yerdən çox yer istəyir`Expanded`/`Flexible` ilə bölüşdür və ya `SingleChildScrollView`-a sal
Column içində ListView açılmırColumn sonsuz hündürlük verir, ListView də sonsuz istəyir`Expanded` ilə bük və ya `shrinkWrap: true` ver
Widget gözlənildiyindən böyük görünürValideyn tight constraint verib — uşaq seçim edə bilmir`Align`, `Center` və ya `SizedBox` ilə çərçivəni dəyiş

Interview ipucu. Layout sualı demək olar həmişə "overflow xətası ilə qarşılaşsan nə edərsən?" formasında gəlir. Cavabda diaqnostikadan başla: DevTools-un Widget Inspector-unda "Layout Explorer" hansı widget-in hansı constraint aldığını göstərir. Sonra səbəbi adlandır (sonsuz vs tight constraint) və yalnız bundan sonra həlli de. Dərhal "Expanded əlavə edərəm" demək təxmin kimi səslənir.

📚 Mənbələr və sənədlər