Cách xây dựng màn hình ứng dụng Flutter

Trong bài viết về Widget, chúng ta đã biết rằng màn hình ứng dụng được tạo bởi các Widget lắp ghép lại với nhau. Vì vậy việc xây dựng màn hình ứng dụng Flutter chính là việc tạo ra và sử dụng các Widget, lắp ráp chúng lại với nhau, trong hàm build:

Sau khi đọc xong bài viết này các bạn sẽ nắm được tư duy xây dựng màn hình ứng dụng Flutter.

Cách sử dụng các Widget để xây dựng màn hình ứng dụng Flutter

Mỗi Widget có sẵn trong Flutter SDK hay Widget được tạo bởi người lập trình đều có một cách sử dụng tương tự nhau.
Một Widget có thể là con hoặc là cha của Widget khác
Ví dụ:

Trong ví dụ trên có 3 Widget là : Center, Column, Text
Widget “Column” là con của Center và là cha của hai Text
Việc kết nối giữa các widget bằng từ khóa: child: hay children:, đối với Widget MaterialApp kết nối với widget con bằng home:, Widget Scaffold kết nối với Widget con bằng: body:
Cụ thể :
+ child: Dùng trong widget chỉ có thể có 1 widget con, ví dụ: Center, Container, SizedBox…
+ children: Dùng trong widget có thể có nhiều widget con, ví dụ: Row, Column, Stack, ListView, GridView ..
+ home: Dùng trong Widget “MaterialApp” – Widget này thường được dùng một lần ban đầu trong hầu hết các ứng dụng, widget chứa các widget mà rất cần thiết trong tạo dựng ứng dụng.(material design).
+ body: Dùng trong Widget “Scaffold” – Widget này được dùng để tạo cấu trúc layout màn hình. Thường được sử dụng khi tạo mỗi màn hình.

Thực hành xây dựng màn hình ứng dụng Flutter

Xây dựng màn hình bên dưới :

Phân tích

+ Màn hình bên dưới gồm 1 widget Container chứa 4 Widget khác là : 2 TextField, 1 Text và một Button.
+ Bốn Widget kia sếp theo cột trong Container
+ Container kia ở giữa màn hình.

Giải pháp
Tạo Container có widget con là một cột , trong cột đó có chứa các Widget con là : 2 TextField và 1 widget Text, 1 widget RaisedButton.

Triển khai

– Bắt đầu 1 ứng dụng chúng ta luôn bắt đầu với việc tạo màn hình ứng dụng với MaterialApp và Scaffold với material design.

Vì Container nằm ở giữa nên chúng ta đặt ở Center, kết quả cuối là:

Kết luận: Như vậy các bạn đã hiểu được cơ bản cách xây dựng màn hình ứng dụng Flutter
Màn hình ứng dụng được tạo nên bởi các Widgets , được ghép với nhau trong hàm build.
Widget có thể là cha của widget này và là con của widget khác. Chúng liên kết với nhau bằng các từ khoá: child, children, home, body. Nếu các bạn có câu hỏi hay thắc mắc, hãy để lại comment. Chúc các bạn có được nhiều kiến thức trong blog của tôi !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *