Một hàng gồm icon, tiêu đề và nhãn trạng thái có thể chạy đẹp với chữ ngắn nhưng tràn khi tên tài liệu dài. Thêm maxLines chưa đủ nếu Text chưa nhận một giới hạn chiều rộng hữu ích. Bạn cần xem cách Row phân phối phần không gian còn lại.
Bài dành cho người đã tạo được ứng dụng Flutter cơ bản. Các API được đối chiếu ngày 27/10/2026; trang hướng dẫn constraints hiện ghi phạm vi Flutter 3.47. Ví dụ được rà theo tài liệu, chưa build hoặc chạy widget test trong lượt biên tập, nên phần kiểm tra giao diện dưới đây là việc cần thực hiện trên dự án của bạn.
1. Dành phần còn lại cho tiêu đề
Đặt ví dụ sau vào lib/main.dart của ứng dụng Flutter. Không cần package ngoài SDK:
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: DemoPage()));
class DemoPage extends StatelessWidget {
const DemoPage({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.article_outlined),
SizedBox(width: 8),
Expanded(
child: Text(
'Tài liệu hướng dẫn phát triển ứng dụng cho nhóm mới',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(width: 8),
Text('Mới'),
],
),
),
),
);
}
}Trong bố cục này, Row có chiều rộng được giới hạn bởi màn hình và Padding. Icon, khoảng cách và nhãn trạng thái chiếm phần của chúng. Expanded nhận phần chiều rộng còn lại cho tiêu đề; Text có giới hạn để quyết định xuống dòng và dùng dấu rút gọn.
maxLines: 2 là lựa chọn trình bày của ví dụ, không phải quy tắc cho mọi tên tài liệu. Nếu tiêu đề là thông tin quan trọng, hãy có nơi xem đầy đủ hoặc cho phép nhiều dòng hơn.
2. Expanded và Flexible khác nhau ở yêu cầu với con
Expanded yêu cầu con lấp phần không gian được cấp theo trục chính. Flexible với FlexFit.loose cho phép con nhỏ hơn phần tối đa được cấp. Cả hai tham gia bố cục flex, nhưng khác mức ràng buộc kích thước con.
Để thử khác biệt, thay Expanded của ví dụ bằng đoạn sau và đổi tiêu đề sang một từ ngắn:
Flexible(
fit: FlexFit.loose,
child: Text('Ngắn'),
),Với bố cục này, nhãn phía sau có thể nằm gần chữ ngắn hơn vì Text không buộc chiếm hết phần được cấp. Nếu bạn muốn nhãn cuối luôn được đẩy về phía cuối hàng, Expanded thường diễn đạt ý định rõ hơn. Hãy nhìn cả vị trí phần tử sau Text khi so sánh, không chỉ nhìn vùng chữ.
Khi có nhiều con flex, flex tham gia chia phần còn lại giữa chúng. Nó không phải tỷ lệ phần trăm của toàn bộ màn hình, vì phần tử không flex và khoảng cách vẫn phải được tính trước.
3. Đặt Padding đúng phía
Expanded phải nhận parent data phù hợp từ Row, Column hoặc Flex. Một cách đặt khoảng đệm dễ hiểu là Row → Expanded → Padding → Text. Đặt Padding làm cha trực tiếp của Expanded ở giữa Row và Expanded có thể tạo lỗi parent data.
Trong ví dụ hoàn chỉnh, Padding bọc cả Row, nên nó tạo giới hạn bên ngoài cho hàng. Đó là tình huống khác với việc chèn một render widget giữa Row và một con Expanded. Khi gặp lỗi, đọc đường đi widget thay vì chỉ tìm xem Expanded có xuất hiện đâu đó trong cây hay không.
4. Kiểm tra chiều rộng hữu hạn trước
Nếu đưa hàng này vào một vùng cuộn ngang, chiều rộng theo hướng cuộn có thể không bị chặn. Khi ấy, “phần còn lại” không còn là một số hữu hạn để Expanded lấp đầy. Đổi sang một widget khác mà vẫn giữ constraints không phù hợp có thể chỉ chuyển thông báo lỗi.
Xác định phần nào phải có chiều rộng giới hạn, chẳng hạn một card có kích thước được quy định bởi bố cục cha. Nếu yêu cầu thật sự là cuộn ngang để xem toàn bộ nội dung, hãy thiết kế hàng theo kích thước nội dung thay vì mặc định bắt nó lấp một chiều rộng vô hạn.
Kiểm tra kết quả và giới hạn
Thử trên chiều rộng nhỏ, ngang màn hình và cỡ chữ lớn. Tiêu đề dài phải rút gọn theo số dòng đã chọn; nhãn “Mới” vẫn nhìn thấy. Sau đó dùng tiêu đề ngắn để quan sát khác biệt giữa Expanded và Flexible. Tiếp tục thử nhãn trạng thái dài hơn, vì phần tử không flex cũng có thể chiếm hết không gian.
Nếu nhiều thông tin cạnh tranh trên một hàng hẹp, chuyển nhãn xuống hàng khác có thể phù hợp hơn việc giảm cỡ chữ. Expanded là công cụ phân phối constraints, không bảo đảm mọi thiết kế luôn vừa một hàng.
Hiểu giới hạn mà Text nhận được sẽ giúp bạn sửa lỗi có lý do. Đừng thêm flex chỉ vì thấy sọc overflow; hãy xác định phần cần co, phần cần giữ và nơi giới hạn chiều rộng được tạo ra.
