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 Navigation and Routing

Trong Flutter, việc chuyển đổi giữa các màn hình (screen/page) được thực hiện thông qua Navigator và Route. Flutter cung cấp hai loại điều hướng chính: Named Route: Sử dụng chuỗi định danh (string) để gọi màn hình. Direct Route: Sử dụng đối tượng Route để gọi màn hình. Navigator là một widget quản lý […]

Flutter State Management

SetState là cách cập nhật trạng thái cơ bản: Provider – Một nhà cung cấp thì dùng ChangeNotifierProvider Dùng navigator. Màn hình như ngăn sếp push vô pop ra. Provider có thể quản lý trạng thái ở nhiều màn hình khác nhau. Dùng với comsumer có thể dùng tham số trực tiếp truy xuất thay vì dùng […]

Flutter Widget

Flutter Widget là thành phần cơ bản nhất trong Flutter, được sử dụng để tạo ra giao diện người dùng (UI). Mọi thứ trong Flutter, từ văn bản, hình ảnh, nút bấm cho đến toàn bộ giao diện ứng dụng, đều là widget. Widgets trong Flutter là bất biến (immutable), tức là khi trạng thái […]

Flutter Package

Flutter Package là một bộ mã nguồn chứa các chức năng được viết sẵn giúp lập trình viên có thể tái sử dụng trong ứng dụng của mình. Các package này thường được chia sẻ công khai và được sử dụng để tăng tốc quá trình phát triển, bổ sung các tính năng hoặc tích […]

Cài đặt Flutter – MacOS

Để cài đặt Flutter trên hệ điều hành của bạn, bạn có thể làm theo hướng dẫn sau tùy theo hệ điều hành của mình. Flutter hỗ trợ Windows, macOS, và Linux. Dưới đây là các bước cài đặt Flutter cho từng hệ điều hành MacOS Bước 1: Tải Flutter SDK Truy cập: https://docs.flutter.dev/get-started/install/macos/mobile-ios Tải xuống […]

Flutter – Phát triển ứng dụng đa nền tảng

Flutter là một bộ công cụ phát triển giao diện người dùng (UI) mã nguồn mở do Google phát triển. Flutter giúp các lập trình viên xây dựng ứng dụng di động, web, và desktop từ cùng một codebase duy nhất. Điều này có nghĩa là bạn có thể viết một lần và triển khai […]