Thuta Learning
ရှာဖွေရန်
BasicMobile Developmentbeginner

Basic Widgets

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

Flutter app တစ်ခုမှာ နေ့တိုင်းနီးပါးသုံးရမယ့် widget တွေရှိပါတယ်။ Text ကစာပြရန်၊ Icon က icon ပြရန်၊ Image ကပုံပြရန်၊ Container က box/styling ပြုလုပ်ရန်၊ Scaffold က page structure တည်ဆောက်ရန်သုံးပါတယ်။ ဒီ widget တွေကိုသိရင် simple UI အများစုကို စတင်တည်ဆောက်နိုင်ပါပြီ။

dart
Scaffold(
  appBar: AppBar(title: const Text('Basic Widgets')),
  body: Center(
    child: Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(16),
      ),
      child: const Text(
        'Hello Flutter',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)
You should see
App bar ပါတဲ့ screen အလယ်မှာ အပြာရောင် rounded box တစ်ခုနှင့် Hello Flutter စာသားပေါ်ပါမယ်။

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

UI elements တွေရှိပြီဆိုရင် Row နဲ့ Column သုံးပြီး ဘယ်လိုစီမလဲကိုဆက်သင်ပါ။

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

  • Text ကို color နဲ့ background တိုက်မိအောင်ရေးရင် မဖတ်ရလွယ်ပါ။ Contrast ကိုအမြဲစစ်ပါ။
Basic Widgets | Thuta Learning