Flutter Layout

Flutter Layout là gì ?

Trong Flutter, layout là quá trình sắp xếp các widget con trong không gian giao diện người dùng. Flutter cung cấp nhiều widget layout giúp xây dựng giao diện ứng dụng linh hoạt và dễ dàng. Việc sử dụng đúng các widget layout sẽ giúp bạn tạo ra giao diện đẹp mắt và dễ bảo trì.

Các loại widget layout cơ bản

1. Row và Column

• Row: Dùng để sắp xếp các widget con theo chiều ngang (theo hàng).

• Column: Dùng để sắp xếp các widget con theo chiều dọc (theo cột).

2. Stack

• Stack: Cho phép xếp các widget lên trên nhau (layered layout), giống như một tấm ảnh có nhiều lớp.

3. Expanded và Flexible

• Expanded: Làm cho widget con chiếm hết không gian còn lại trong Row, Column, hoặc Flex.
• Flexible: Tương tự như Expanded, nhưng cho phép kiểm soát tỷ lệ không gian mà widget con chiếm.

4. Container

• Container: Là một widget rất linh hoạt, có thể dùng để bọc, trang trí, và định dạng các widget khác như padding, margin, kích thước, màu sắc.

5. SizedBox

• SizedBox: Dùng để tạo không gian trống với kích thước xác định, có thể dùng để tạo khoảng cách giữa các widget.

6. ListView

• ListView: Dùng để hiển thị danh sách các widget con có thể cuộn (scrollable list). Đây là widget phổ biến khi làm việc với danh sách dữ liệu dài.

Các widget Nâng cao hơn

1. Align và Center

• Align: Dùng để đặt widget con vào một vị trí cụ thể trong không gian của widget cha. Bạn có thể điều chỉnh vị trí bằng cách sử dụng thuộc tính alignment.

• Center: Dùng để căn giữa widget con trong không gian của widget cha.

2. AspectRatio

AspectRatio: Dùng để giữ tỉ lệ khung hình của widget con khi thay đổi kích thước. Thường được sử dụng để giữ một kích thước cố định cho các widget như ảnh hoặc video.

3. IntrinsicWidth và IntrinsicHeight

• IntrinsicWidth: Dùng để tự động điều chỉnh chiều rộng của widget con sao cho phù hợp với kích thước nội dung của nó.

• IntrinsicHeight: Tương tự như IntrinsicWidth nhưng điều chỉnh chiều cao của widget.

4. Flex

Flex: Dùng để điều khiển phân phối không gian giữa các widget con trong một không gian có thể thay đổi kích thước. Flex là một widget cha cho Row và Column, giúp kiểm soát cách các widget con phân phối không gian.

5. MediaQuery

MediaQuery: Dùng để lấy thông tin về kích thước và độ phân giải của màn hình, giúp điều chỉnh giao diện để phù hợp với các kích thước màn hình khác nhau (responsive design).

6. FlexibleSpaceBar

FlexibleSpaceBar: Dùng trong các ứng dụng có thanh tiêu đề (AppBar), giúp tạo hiệu ứng mở rộng và thu hẹp cho thanh tiêu đề khi người dùng kéo lên hoặc xuống.

7. Sliver

Sliver là một phần tử giao diện có thể mở rộng hoặc thu hẹp, thường được sử dụng trong CustomScrollView để tạo các hiệu ứng cuộn linh hoạt, chẳng hạn như hiệu ứng thanh tiêu đề thay đổi khi cuộn.

8. Positioned

Positioned: Dùng trong Stack để xác định vị trí cụ thể cho widget con trong Stack, giúp bạn có thể xếp chồng các widget lên nhau và điều chỉnh vị trí từng widget một cách chính xác.

9. Wrap

Wrap: Dùng khi bạn muốn sắp xếp các widget con theo dạng lưới, tự động chuyển sang dòng mới khi không đủ không gian trong dòng hiện tại. Đây là một widget hữu ích khi làm việc với các nút hoặc icon có thể thay đổi kích thước.

10. Draggable và DragTarget

• Draggable: Dùng để tạo các widget có thể kéo đi (drag).

• DragTarget: Dùng để chỉ định khu vực nơi các widget có thể được thả vào.

Ứng dụng Layout vào Mini Project (Note App)

Mục tiêu của Project:

Tạo ứng dụng ghi chú đơn giản với các chức năng cơ bản:

1. Nhập nội dung ghi chú.
2. Lưu ghi chú vào danh sách.
3. Hiển thị danh sách ghi chú.
4. Xóa ghi chú.

Vai trò của các Layout Widget trong Project:

• Container: Dùng để bọc các widget khác, như TextField, ElevatedButton, hoặc ListView. Container cho phép điều chỉnh kích thước, padding, margin, và nhiều thuộc tính khác.
• Column: Dùng để sắp xếp các widget theo chiều dọc. Trong ứng dụng này, Column được sử dụng để sắp xếp các widget như TextField, ElevatedButton và ListView.
• Row: Dùng trong trường hợp cần bố trí các widget theo chiều ngang. Ví dụ, nếu có các nút bấm hoặc icon cần được xếp ngang nhau, Row sẽ rất hữu ích.
• SingleChildScrollView: Dùng để cho phép cuộn toàn bộ nội dung khi người dùng cuộn trang, đặc biệt là khi số lượng widget trong ứng dụng quá nhiều.
• Expanded: Dùng trong trường hợp muốn các widget chiếm không gian còn lại trong Row hoặc Column. Ví dụ, nếu bạn muốn một phần tử chiếm phần còn lại của màn hình, bạn có thể sử dụng Expanded để nó tự động mở rộng.

Mục tiêu sẽ làm trong bài báo cáo này  :

• Trang trí giao diện cơ bảng bằng các Layout
• Github Project : https://github.com/phuoc24205/intern-flutter-project

Hình kết quả:

Bài viết khác

Kanban

1. Kanban là gì? Kanban là một phương pháp quản lý công việc trực quan, giúp bạn theo dõi tiến độ từng nhiệm vụ. Kanban bắt nguồn từ Nhật Bản, ban đầu được Toyota dùng để quản lý dây chuyền sản xuất, nhưng ngày nay được áp dụng rộng rãi trong các lĩnh vực như […]

Đọc thêm

Scum

1. Scrum là gì? Scrum là một khung làm việc (framework) giúp các nhóm làm việc cùng nhau để phát triển sản phẩm một cách linh hoạt và hiệu quả. Nó thuộc phương pháp Agile – đề cao sự thích nghi, cộng tác và cải tiến liên tục trong quá trình làm việc. 2. Các […]

Đọc thêm

So sánh Realm, Hive, Sqflite, và Drift

So sánh Tiêu chí Realm Hive Sqflite Drift Mức độ phổ biến Tăng nhanh (Meta hỗ trợ) Rất phổ biến Rất phổ biến Trung bình (cộng đồng ổn định) Dễ sử dụng, dễ tích hợp Trung bình (cần setup Realm SDK) ★ Rất dễ (NoSQL, không cần SQL) Trung bình (phải viết SQL tay) Trung […]

Đọc thêm

Testing

I. Testing là gì? Testing (kiểm thử phần mềm) là quá trình đánh giá một hệ thống phần mềm để xác định xem sản phẩm có đáp ứng các yêu cầu được đặt ra hay không, và nhằm phát hiện lỗi nếu có. Testing là một phần quan trọng trong vòng đời phát triển phần […]

Đọc thêm

Application security

Ứng dụng bảo mật là gì? Application Security (Bảo mật ứng dụng) là quá trình bảo vệ ứng dụng khỏi các lỗ hổng và tấn công từ các mối đe dọa bên ngoài. Quá trình này bao gồm các biện pháp bảo vệ trong suốt vòng đời phát triển phần mềm (SDLC): từ thiết kế, […]

Đọc thêm

MVC/MVP

1. Giới thiệu chung Trong phát triển phần mềm, việc tổ chức mã theo mô hình kiến trúc rõ ràng là rất quan trọng để dễ dàng bảo trì, mở rộng và kiểm thử. Hai mô hình phổ biến trong phát triển ứng dụng là: MVC (Model – View – Controller) MVP (Model – View […]

Đọc thêm