Chia sẻ không gian với flex

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 2 trên 30.

Khi hai phần tử con của một Row đều là Expanded, chúng chia đều không gian: trên điện thoại rộng 390 pixel, mỗi phần tử nhận 195 pixel.

Để chia không gian không đều, hãy đặt flex: cho Expanded. Đây là tỷ lệ chia, không phải kích thước. Flutter cộng các tỷ lệ rồi chia không gian theo chúng:

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Tổng các tỷ lệ là 4, nên phần tử màu đỏ chiếm ba phần tư hàng và phần tử màu xanh chiếm một phần tư. Phần tử con không có flex: sẽ có tỷ lệ là 1.

Vì các tỷ lệ là những phần của tổng thể, bố cục vẫn giữ nguyên tỷ lệ trên mọi chiều rộng màn hình.

Thử thách

Dễ

Làm cho hộp Chart rộng gấp đôi hộp Notes. Trên điện thoại, kích thước lần lượt là 260 và 130 pixel.

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}