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.

Ứ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

Flutter Form

FLUTTER FORM LÀ GÌ? Form trong Flutter là widget dùng để thu thập và kiểm tra dữ liệu người dùng nhập vào. Thường dùng khi cần nhập nhiều trường và muốn kiểm tra tính hợp lệ của dữ liệu. Sự khác nhau giữa Form + TextFormField và TextField thông thường TextField là widget đơn lẻ, […]

Đọc thêm

Flutter State Management

State Management trong Flutter là quá trình quản lý và thay đổi trạng thái của widget. Khi state thay đổi, widget sẽ được cập nhật lại để phản ánh thay đổi đó. Có nhiều phương pháp quản lý state trong Flutter, mỗi phương pháp phù hợp với các loại ứng dụng khác nhau.   Các […]

Đọc thêm

Flutter Widget

FLUTTER WIDGET LÀ GÌ? Widget là “viên gạch” để xây nên giao diện Flutter. Mọi thứ nhìn thấy trên app đều là widget: chữ, nút bấm, ô nhập liệu, hình ảnh… Phân loại cơ bản Widget 1. StatelessWidget – Giao diện tĩnh Không thay đổi sau khi được tạo. Dùng khi widget chỉ hiển thị thông tin, […]

Đọc thêm

Flutter Package

Trong quá trình phát triển ứng dụng Flutter, để tiết kiệm thời gian và tái sử dụng các tính năng có sẵn, lập trình viên thường sử dụng Flutter package – là các thư viện (thư viện mã nguồn mở hoặc do cá nhân viết) giúp thêm các chức năng mới vào ứng dụng mà […]

Đọc thêm

Agile – Phương pháp phát triển phần mềm linh hoạt

Agile là gì? Agile là một phương pháp phát triển phần mềm linh hoạt, nhấn mạnh vào khả năng thích nghi với thay đổi, làm việc theo nhóm, và phát triển sản phẩm theo từng phần nhỏ (iterative & incremental). Agile không phải là một quy trình cụ thể, mà là một tư duy (mindset) […]

Đọc thêm

Domain – Tên miền của website trên Internet

Domain là gì? Domain (tên miền) là địa chỉ của một website mà người dùng gõ vào trình duyệt để truy cập. Ví dụ: google.com, facebook.com, mywebsite.vn đều là các tên miền. Nếu Hosting là “ngôi nhà” chứa dữ liệu của website, thì Domain là “địa chỉ nhà” – giúp người dùng tìm đến website […]

Đọc thêm