Điểm ngắt của LayoutBuilder

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 17 trên 30.

Trên máy tính bảng, ứng dụng email hiển thị menu bên cạnh tin nhắn. Trên điện thoại, không đủ chỗ nên menu nằm phía trên. Chiều rộng tại đó bố cục thay đổi được gọi là điểm ngắt.

LayoutBuilder cho bạn biết một widget có bao nhiêu không gian và cho phép bạn tạo nội dung khác nhau tùy theo từng kích thước:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // điện thoại
    }
    return Row(children: [menu, content]); // máy tính bảng
  },
)

builder là một hàm mà Flutter gọi với không gian mà widget có, trong constraints. constraints.maxWidth là chiều rộng tối đa của kết quả. Nếu chiều rộng dưới 600 pixel, bạn trả về Column; nếu không, bạn trả về Row. Trên điện thoại rộng 390 pixel, bạn thấy cột; trên máy tính bảng rộng 1000 pixel, bạn thấy hàng.

MediaQuery đọc thông tin của toàn bộ màn hình. LayoutBuilder đọc không gian của một widget, nên vẫn hoạt động khi widget đó là một bảng trong trang lớn hơn.

Thử thách

Trung bình

Menu và nội dung luôn nằm cạnh nhau, khiến bố cục chật chội trên điện thoại. Dùng LayoutBuilder với điểm ngắt ở 600 pixel:

hẹp hơn 600: menu nằm phía trên nội dung, trong một Column
từ 600 trở lên: nằm cạnh nhau trong một Row, như hiện tại

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('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}