Layouts (Row & Column)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

Row နှင့် Column က Flutter layout ရဲ့ အခြေခံအကျဆုံး tools ဖြစ်ပါတယ်။ Row က child widgets တွေကို ဘေးတိုက်စီပြီး Column က အပေါ်အောက်စီပါတယ်။ UI ရေးတဲ့အခါ ဘာကို horizontal စီမလဲ၊ ဘာကို vertical စီမလဲဆိုတာဆုံးဖြတ်တာက layout thinking ရဲ့အစပါ။

dart

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('Rate this lesson'),
    const SizedBox(height: 12),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Icon(Icons.star, color: Colors.amber, size: 36),
        Icon(Icons.star, color: Colors.amber, size: 36),
        Icon(Icons.star, color: Colors.amber, size: 36),
      ],
    ),
  ],
)

You should see

Screen အလယ်မှာ Rate this lesson စာသားပေါ်ပြီး အောက်မှာ ကြယ် icon ၃ ခု ဘေးတိုက်စီနေပါမယ်။

နောက်တစ်ဆင့်

Layout ပြီးရင် user နှိပ်နိုင်တဲ့ buttons တွေကိုစတင်သုံးကြည့်ပါ။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Row ထဲမှာ text အရှည်ကြီးထည့်ပြီး Expanded မသုံးရင် yellow/black overflow warning ပေါ်တတ်ပါတယ်။လိုအပ်ရင် Expanded သို့မဟုတ် Flexible သုံးပါ။