📦 Container Widget

1. Cơ bản

Container là một trong những widget linh hoạt nhất, kết hợp nhiều tính năng:

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Hello'),
)

Mô hình Box (Box Model)

Container bao gồm các lớp layout bao quanh child của nó:

┌─────────────────────────────────────────────────────────┐
│                       MARGIN                            │
│  ┌───────────────────────────────────────────────────┐  │
│  │                    BORDER                         │  │
│  │  ┌─────────────────────────────────────────────┐  │  │
│  │  │                 PADDING                     │  │  │
│  │  │  ┌───────────────────────────────────────┐  │  │  │
│  │  │  │               CONTENT                 │  │  │  │
│  │  │  │             (child)                   │  │  │  │
│  │  │  └───────────────────────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

---

2. Kích thước

Container(
  width: 200,           // Chiều rộng cố định
  height: 100,          // Chiều cao cố định
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 200,
  ),
  child: Text('Constrained'),
)

Lưu ý: Container sẽ co theo child nếu không set width/height.

---

3. Padding và Margin

Container(
  padding: EdgeInsets.all(16),           // Khoảng cách bên trong
  margin: EdgeInsets.symmetric(          // Khoảng cách bên ngoài
    horizontal: 20,
    vertical: 10,
  ),
  color: Colors.blue,
  child: Text('Padded & Margined'),
)

EdgeInsets options

EdgeInsets.all(16)                    // Tất cả các cạnh
EdgeInsets.only(left: 10, top: 5)     // Chỉ định từng cạnh
EdgeInsets.symmetric(                  // Đối xứng
  horizontal: 20,
  vertical: 10,
)
EdgeInsets.fromLTRB(10, 20, 10, 20)   // Left, Top, Right, Bottom

---

4. BoxDecoration

Sử dụng decoration thay vì color để có nhiều options hơn:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.black, width: 2),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Center(child: Text('Decorated')),
)

⚠️ Không dùng cả color và decoration cùng lúc!

---

5. Gradient

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

Các loại gradient

// Linear
LinearGradient(
  colors: [Colors.red, Colors.yellow],
)

// Radial
RadialGradient(
  colors: [Colors.blue, Colors.white],
  radius: 0.8,
)

// Sweep
SweepGradient(
  colors: [Colors.red, Colors.green, Colors.blue],
)

---

6. Border Radius

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    // Tất cả góc
    borderRadius: BorderRadius.circular(20),

    // Từng góc
    // borderRadius: BorderRadius.only(
    //   topLeft: Radius.circular(20),
    //   bottomRight: Radius.circular(20),
    // ),
  ),
)

---

7. Transform

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  // Xoay
  transform: Matrix4.rotationZ(0.1),
  // Hoặc translate
  // transform: Matrix4.translationValues(10, 20, 0),
  child: Center(child: Text('Rotated')),
)

---

8. Alignment

Container(
  width: 200,
  height: 200,
  color: Colors.grey[300],
  alignment: Alignment.bottomRight,
  child: Text('Bottom Right'),
)

Alignment values

topLeft      topCenter      topRight
centerLeft   center         centerRight
bottomLeft   bottomCenter   bottomRight

---

9. Ví dụ thực tế

Card Style

Container(
  width: double.infinity,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Card Title', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
      SizedBox(height: 8),
      Text('Card description goes here...'),
    ],
  ),
)

Badge/Tag

Container(
  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Text(
    'NEW',
    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  ),
)

---

10. Container vs các widget khác

Cần gì	Dùng widget
Chỉ cần padding	Padding
Chỉ cần margin	Padding wrapped in parent
Chỉ cần alignment	Align
Chỉ cần kích thước	SizedBox
Nhiều tính năng	Container

---

📝 Tóm tắt

Property	Mục đích
width, height	Kích thước
padding	Khoảng cách bên trong
margin	Khoảng cách bên ngoài
color	Màu nền (đơn giản)
decoration	Styling nâng cao
alignment	Căn chỉnh child
transform	Biến đổi (xoay, dịch)
constraints	Giới hạn kích thước