Bài 5. Bố cục giao diện (Layout)

Khái niệm và lý thuyết

Quy tắc vàng của bố cục Flutter: ràng buộc đi xuống, kích thước đi lên, cha quyết định vị trí. Widget cha truyền giới hạn cho con; con chọn kích thước trong giới hạn đó và báo lại; cha đặt con vào vị trí. Hiểu quy tắc này giúp giải thích hầu hết lỗi bố cục như “RenderFlex overflowed” hay “unbounded height”.

Row và Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text('Khóa học Flutter', style: TextStyle(fontSize: 22)),
    const SizedBox(height: 8),
    Row(
      children: [
        const Icon(Icons.star, color: Colors.amber),
        const SizedBox(width: 4),
        const Text('4.9'),
        const Spacer(),
        FilledButton(onPressed: () {}, child: const Text('Học ngay')),
      ],
    ),
  ],
)

Expanded và Stack

Row(children: [
  Expanded(flex: 2, child: Container(height: 60, color: Colors.green)),
  Expanded(flex: 1, child: Container(height: 60, color: Colors.orange)),
]);  // tỉ lệ 2:1

Stack(children: [
  Image.network('https://picsum.photos/400/200'),
  const Positioned(bottom: 8, left: 8,
    child: Text('Ảnh bìa', style: TextStyle(color: Colors.white))),
]);

Responsive

LayoutBuilder(builder: (context, c) {
  if (c.maxWidth >= 840) return const BoCucMayTinh();   // 3 cột
  if (c.maxWidth >= 600) return const BoCucMayTinhBang(); // 2 cột
  return const BoCucDienThoai();                          // 1 cột
});
// Kích thước màn hình: MediaQuery.sizeOf(context).width