Cơ chế cốt lõi để xây dựng nên layout trong Flutter là Widget. Hầu như tất cả mọi thứ đều là Widget Ảnh, icon, text, rows, columns, grid, arrange, constrain, align,…

Material apps
– Sử dụng Scaffold widget. Chúng ta có thể sử dụng widget trong phần body.


Non-Material apps


Aligning widget

Diagram showing the main axis and cross axis for a rowDiagram showing the main axis and cross axis for a column
mainAxisAlignment và crossAxisAlignment cung cấp nhiều loại hằng số để kiểm soát việc căn chỉnh.

Ví dụ:
Sample layout
– 1 container chứa toàn bộ
– 1 row để sắp xếp theo hàng ngang
– 3 colume để sắp sếp icon và text theo cột
Screenshot of the pavlova app, with the ratings and icon rows outlined in red

– 1 container chứa toàn bộ
– 2 row chứa 2 hàng khác nhau
– Hàng 1:

  • 1 row chứa 5 icon
  • 1 text

– Hàng 2:

  • 3 colume chứa icon text và text

Container:
Diagram showing: margin, border, padding, and content

GridView: sử dụng sắp sếp các tiện ích dạng 2 chiều. Tự động cung cấp tiện ích scroll nếu phần hiển thị bị tràn

ListView: giống như colume. Tự động cung cấp tiện ích scroll nếu phần hiển thị bị tràn

Stack: sử dụng để sắp xếp các widget thường là hình ảnh. Các widget có thể chồng lên hoàn toàn hoặc 1 phần.

Card:
– Thường được sử dụng với ListTitle.
– Mỗi thẻ có 1 child duy nhất. Nhưng child của nó có thể chứa nhiều widget.
– Sử dụng SizedBox để điều chỉnh kích thước.

ListTitle: là 1 widget hàng chứa tối đa 3 dòng. Sử dụng phổ biến trong Card và ListView.

 

 

 

About the Author

Duy Khang

View all author's posts

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ẻ, […]

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 […]

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 […]

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, […]

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à […]

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) […]