Container Widget trong Flutter

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),
  ),
)

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