Day 18: Container, Padding, Row & Column

ဒီနေ့မှာတော့ Flutter app တွေမှာ UI တွေ တည်ဆောက်တဲ့အချိန် အသုံးများတဲ့ built-in widget တွေအကြောင်း စပြီးတော့ ဆွေးနွေးသွားမှာ ဖြစ်ပါတယ်။ Widget တွေနဲ့ သူတို့ရဲ့ အလုပ်လုပ်ပုံတွေကို နားလည်ခြင်းအားဖြင့် UI တွေ တည်ဆောက်တဲ့နေရာမှာ လွယ်လင့်တကူ တည်ဆောက်သွားနိုင်မှာပဲ ဖြစ်ပါတယ်။

Container

ဒါကတော့ သူ့ရဲ့ နာမည်အတိုင်း widget တွေကို ထည့်သွင်းတည်ဆောက်လို့ရမယ့် container တခုပဲ ဖြစ်ပါတယ်။ သူ့ကိုတော့ width/height တွေ သတ်မှတ်ချင်တဲ့အခါ၊ decoration တွေ လုပ်ချင်တဲ့အခါ စသဖြင့် အသုံးပြုပါတယ်။ သူ့ရဲ့ အလုပ်လုပ်ပုံကိုတော့ အောက်မှာ ကြည့်ကြရအောင်ပါ။

Container(
  // Size
  width: 200,
  height: 100,
  
  // Outer spacing
  margin: const EdgeInsets.all(16),
  
  // Inner spacing
  padding: const EdgeInsets.all(20),
  
  // Alignment
  alignment: .center,
  
  // Decoration
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  
  child: const Text('Hello Container!'),
)

ဒီမှာတော့ width/height သတ်မှတ်ပေးထားတဲ့အတွက် box လိုမျိုးကို ရမှာပဲ ဖြစ်ပါတယ်။ ပြီးတော့ margin နဲ့ padding ထည့်ထားပေးတဲ့အတွက် ပတ်လည်မှာ အကွာအဝေးလေးတွေ မြင်နေရမှာပဲ ဖြစ်ပါတယ်။ alignment ကတော့ container ထဲမှာ ထည့်ထားတဲ့ widget တွေ ဘယ်ဘက်ကို ကပ်နေမှာလဲဆိုတာကို သတ်မှတ်ပေးတာ ဖြစ်ပါတယ်။ decoration ကတော့ အရောင်တွေ၊ ဒေါင့်လေးတွေ ကွေးနေအောင်တွေ၊ shadow တွေ သတ်မှတ်ချင်ရင် သုံးလို့ရပါတယ်။ နောက်ဆုံးမှာတော့ သူ့ထဲမှာ ထည့်မယ့် child widget ကို ထည့်ပေးလိုက်ပါမယ်။

Box Decoration

Box decoration နဲ့ ပတ်သက်ပြီး နည်းနည်းလောက် ဆက်ကြည့်ကြည့်ရအောင်ပါ။ box decoration ထဲမှာ background color တွေ, gradient တွေ, border တွေ, border radius တွေ, box shadows တွေ, background image တွေ သတ်မှတ်နိုင်ပါတယ်။​ တကယ်လို့ custom shape တွေ လိုချင်တယ်ဆိုလဲ container ရဲ့ box decoration ကို အသုံးပြုပြီး ရေးသွားလို့ရပါတယ်။

Container(
  width: double.infinity,
  padding: const EdgeInsets.all(20),
  margin: const EdgeInsets.all(16),

  decoration: BoxDecoration(
    // 1. Gradient background
    gradient: LinearGradient(
      colors: [Colors.purple.shade400, Colors.blue.shade600],
      begin: .topLeft,
      end: .bottomRight,
    ),

    // 2. Rounded corners
    borderRadius: BorderRadius.circular(20),

    // 3. Shadow for depth
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 10,
        offset: const Offset(0, 5),
      ),
    ],

    // 4. Border
    border: Border.all(color: Colors.white.withOpacity(0.3), width: 2),
  ),

  child: const Column(
    crossAxisAlignment: .start,
    mainAxisSize: .min,
    children: [
      Text(
        'Premium Card',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: .bold,
        ),
      ),
      SizedBox(height: 8),
      Text(
        'With gradient and shadow',
        style: TextStyle(color: Colors.white70),
      ),
    ],
  ),
)

Padding

တကယ်လို့ Container လိုမျိုး properties တွေ အများကြီး မလိုဘူး ဘေးနားမှာ padding လိုမျိုးလေးပဲ လိုတယ်ဆိုရင်တော့ Padding widget ကို သုံးလိုက်လို့ရပါတယ်။ သူ့ထဲမှာတော့ အခြား properties တွေ မပါပါဘူး။ padding value သတ်မှတ်ဖို့ပဲ ပါပါတယ်။

Padding properties သတ်မှတ်တဲ့အခါ သတ်မှတ်လို့ရတဲ့ ပုံစံတွေ အမျိုးမျိုး ရှိပါတယ်။

EdgeInsets.all(<num>

• ပတ်လည် တခုလုံး သတ်မှတ်ချင်တဲ့အခါ သုံးလို့ရပါတယ်။

padding: const EdgeInsets.all(16) 

EdgeInsets.symmetric(horizontal: <num>, vertical: <num>

• ဘယ်ညာ (ဒါမှမဟုတ်) အပေါ်အောက် တူညီတဲ့ အကွာအဝေးကို သတ်မှတ်ချင်တဲ့အခါ သုံးလို့ရပါတယ်။

padding: const EdgeInsets.symmetric(
  horizontal: 20,  // Left & Right
  vertical: 10,    // Top & Bottom
)

EdgeInsets.only(left: <num>, top: <num>, right: <num>, bottom: <num>)

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

padding: const EdgeInsets.only(
  left: 20,
  top: 10,
)

EdgeInsets.fromLTRB(<num>, <num>, <num>, <num>)

• ဒါကတော့ အပေါ်က only လိုမျိုး တချို့ပဲ လိုတာမဟုတ်ဘဲ ပတ်လည်လိုအပ်တယ်ဆို သုံးလို့ရပါတယ်။

padding: const EdgeInsets.fromLTRB(20, 10, 20, 5)

Column

ဒါကတော့ တခုထက်ပိုတဲ့ widget တွေကို ဒေါင်လိုက် စုချင်တဲ့အခါ သုံးကြပါတယ်။ ဒေါင်လိုက် စုချင်တာ ဖြစ်တဲ့အတွက် သူ့ရဲ့ main axis ကတော့ vertical axis ပဲ ဖြစ်ပါတယ်။ cross axis ကတော့ အလျားလိုက် ဖြစ်ပါတယ်။ ဒါကို ကွဲပြားအောင် သိဖို့လိုပါတယ်။

Row

ဒါကတော့ column နဲ့ ဆန့်ကျင်ဘက် ဖြစ်ပြီး widget တွေကို အလျားလိုက် စုချင်တဲ့အခါ သုံးကြပါတယ်။ အလျားလိုက် စုချင်တာ ဖြစ်တဲ့အတွက် သူ့ရဲ့ main axis ကတော့ horizontal axis ပဲ ဖြစ်ပါတယ်။ cross axis ကတော့ ဒေါင်လိုက် ဖြစ်ပါတယ်။

Row & Column in Action

class HeaderWidget extends StatelessWidget {
  const HeaderWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        mainAxisAlignment: .spaceBetween,
        crossAxisAlignment: .center,
        children: [
          const Column(
            crossAxisAlignment: .start,
            mainAxisSize: .min,
            children: [
              Text("Welcome back,", style: TextStyle(color: Colors.grey)),
              Text(
                "Aung Aung",
                style: TextStyle(fontSize: 20, fontWeight: .bold),
              ),
            ],
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.settings, color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

Row နဲ့ Column မှာ mainAxisAlignment နဲ့ crossAxisAlignment ဆိုပြီး တွေ့ရမှာပါ။ ဒါကတော့ အပေါ်မှာ ပြောခဲ့သလိုပဲ အလျားလိုက် ဒါမှမဟုတ် ဒေါင်လိုက် alignment တွေ သတ်မှတ်ချင်တဲ့အခါ သုံးပါတယ်။

ဒါဆိုရင်တော့ Container, Padding, Column, Row တို့နဲ့ ပတ်သက်တာတွေ သေသေချာချာလေး သိသွားလောက်ပြီ ထင်ပါတယ်။

ဒီနေ့ Day 18 အတွက်ကတော့ ဒီလောက်ပဲ ဖြစ်ပါတယ်။ အဆုံးထိ ဖတ်ပေးတဲ့အတွက် အများကြီး ကျေးဇူးတင်ပါတယ်။ နားမလည်တာတွေ အဆင်မပြေတာတွေ ရှိခဲ့ရင်လဲ အောက်မှာပေးထားတဲ့ discord server ထဲမှာ လာရောက်ဆွေးနွေးနိုင်ပါတယ်။ နောက်နေ့တွေမှာလဲ ဆက်လက်ပြီး sharing လုပ်သွားပေးသွားမှာ ဖြစ်တဲ့အတွက် subscribe လုပ်ထားဖို့ ဖိတ်ခေါ်ပါတယ်။

• Youtube: https://www.youtube.com/@arkarmintun
• Newsletter: https://arkar.dev/
• Discord: https://discord.gg/3xUJ6k6dkH