> ## Content Index
> Fetch the complete content index at: https://arkar.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Day 18: Container, Padding, Row & Column
- URL: https://arkar.dev/day-18-container-padding-row-column/
- Published: 2026-01-20T15:53:54.000Z
- Updated: 2026-01-20T15:53:54.000Z
- Description: Master Flutter's essential layout widgets - Container, Padding, Row and Column - with modern 2025 shorthands and real-world examples for building professional mobile UIs.
- Author: Arkar Min Tun
- Tags: 100 days of flutter, flutter

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

## Container

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

```dart
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!'),
)
```

![](https://arkar.dev/content/images/2026/01/image-64.png)

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

⚠️

`color` တခုထဲလိုရင်တော့ `decoration` လို့ သီးသန့်မသုံးဘဲ `color` ဆိုပြီး တိုက်ရိုက်သုံးလို့ ရပါတယ်။ ဒါပေမယ့် ၂ခုလုံးကို တပြိုင်နက် သုံးလို့မရတာကိုတော့ သတိထားရပါမယ်။

### Box Decoration

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

```dart
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),
      ),
    ],
  ),
)
```

![](https://arkar.dev/content/images/2026/01/image-71.png)

## Padding

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

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

#### `EdgeInsets.all(<num>`

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

```dart
padding: const EdgeInsets.all(16) 
```

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

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

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

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

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

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

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

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

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

```

## Column

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

![](https://arkar.dev/content/images/2026/01/image-69.png)

## Row

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

![](https://arkar.dev/content/images/2026/01/image-70.png)

## Row & Column in Action

```dart
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 တွေ သတ်မှတ်ချင်တဲ့အခါ သုံးပါတယ်။

![](https://arkar.dev/content/images/2026/01/image-72.png)

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

---

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

- Youtube: [https://www.youtube.com/@arkarmintun](https://www.youtube.com/@arkarmintun?ref=arkar.dev)
- Newsletter: <https://arkar.dev/>
- Discord: [https://discord.gg/3xUJ6k6dkH](https://discord.gg/3xUJ6k6dkH?ref=arkar.dev)

---