Khi lập trình ứng dụng di động đa nền tảng, thiết bị của người dùng sẽ có rất nhiều kích thước màn hình khác nhau. Do đó, kỹ thuật thiết kế giao diện thích ứng là vô cùng quan trọng.
1. Bản chất của Row và Column trong Flutter
- Row: Sắp xếp các Widget con theo chiều ngang (Main Axis: Ngang, Cross Axis: Dọc).
- Column: Sắp xếp các Widget con theo chiều dọc (Main Axis: Dọc, Cross Axis: Ngang).
- Căn chỉnh (Alignment): Sử dụng
mainAxisAlignment và crossAxisAlignment để phân bổ khoảng cách giữa các Widget con cực kỳ dễ dàng.
2. Container: Khối dựng hình đa năng
Widget Container hoạt động như một thẻ div trong thiết kế web, giúp bạn cấu hình:
* padding và margin để tạo khoảng trống.
* decoration (BoxDecoration) để bo góc (borderRadius), tạo bóng (boxShadow), và tạo màu nền gradient thời thượng.
3. Các Widget bổ trợ thích ứng: Flexible và Expanded
- Expanded: Ép Widget con chiếm toàn bộ khoảng trống còn lại của hàng hoặc cột.
- Flexible: Cho phép Widget con co giãn linh hoạt mà không bị tràn viền màn hình (Yellow/Black striped overflow warning).
