Những Widget thường dùng trong Flutter

Trong bài viết trước về cách xây dựng màn hình ứng dụng Flutter, các bạn biết rằng các màn hình ứng dụng được tạo ra bởi các widget ghép lại với nhau. Vì vậy việc hiểu và sử dụng các Widget là rất quan trọng. Vì vậy trong bài viết này, tôi sẽ giới thiệu cho các bạn về những widget quan trọng trong Flutter.

Hầu hết các Widget đều có các phần sau đây:
+ Đặc tính của Widget như : color, theme, height, weight, decoration, onTap, onPressed
+ Liên kết với các Widget khác với từ khoá: child, children, home hoặc body

Ví dụ :

Khi làm một số App cơ bản, bạn sẽ nắm chắc được cách sử dụng các Widget hay dùng.

MaterialApp
– Là widget rất liện lợi, cung cấp các widget cho việc xây dựng ứng dụng sử dụng thư viện Material Design UI của google.
– Widget này được sử dụng trong hàm build đầu tiên của hầu hết các ứng dụng.

Ngoài ra, còn có các thuộc tính khác trong MaterialApp – Xem thêm.

Scaffold

Là Widget cung cấp cấu trúc layout cho màn hình ứng dụng.

Ngoài ra còn có các thuộc tính trong Scaffold . Xem thêm

Center

Đây là Widget giúp widget con của nó được đặt ở giữa.
Liên kết với widget con qua : child
Ví dụ :

Container
Đây là widget giống như một layout box, chứa các Widget bên trong nó, tiện lợi cho việc tạo cấu trúc trong màn hình ứng dụng.
Container liên kết với widget con qua thuộc tính, child:
Trong bài cách xây dựng màn hình ứng dụng Flutter, chúng ta đã sử dụng Container. Bạn có thể hiểu Container hơn qua ví dụ này :

Bạn có thể thêm màu Container qua thuộc tính : color, thay đổi kích thước qua: height, width
, căn chỉnh lề, vị trí qua alignment, padding, margin.
Ngoài ra còn nhiều thuộc tính khác bạn có thể xem thêm ở đây.

SizedBox
Widget này thường dùng để tạo các khoảng trống space như ví dụ trên .
Hoặc dùng để tạo kích thước cho các Widget khác bởi cũng có các thuộc tính kích thước như height, width
Liên kết với các widget tên qua thuộc tính, child:

Row, Column
– Đây là những widget giúp những widget con của nó được xếp theo hàng (row) hoặc theo cột ( column).
– Liên kết với các widget con bằng thuộc tính children, các widget con cách nhau bởi dấu phẩy.
– Căn chỉnh các widget con bằng các thuộc tính: mainAxisAlignment, crossAxisAlignment.

Trong ví dụ trên đã dùng Column, Widget Row cũng sẽ tương tự nhưng là hàng ngang

ListView, GridView, ScrollView
– Đây là những widget dùng để chứa các widget con mà có thể scroll theo màn hình theo chiều dọc và chiều ngang.
– Liên kết với các widget con qua thuộc tính : children

Bạn có thể xem chi tiết cách sử dụng từng loại : ListView, GridView, ScrollView

Báo Flutter sẽ có những bài viết riêng về từng loại trong các bài viết sau.

Button
Trong Flutter có sẵn rất nhiều Widget là các button. Người lập trình cũng có thể tự tạo những button riêng.
– Bạn có thể đặt tên cho button qua – child: Text(“Tên Button”),
– Hàm thực thi sau khi nhấn nút – onPressed: (){ // Hàm thực thi }

Các loại button :
+ ButtonBar
+ DropdownButton
+ FlatButton
+ FloatingActionButton
+ IconButton
+ OutlineButton
+ RaisedButton
+ PopupMenuButton

Ví dụ:

Text

Text là một Widget để hiển thị text.

TextField, TextFormField
Đây là 2 widget dùng để nhập thông tin trong màn hình ứng dụng.

Để thực hành cho các Widget trên, các bạn có thể thực hành bài tập dưới đây:

Làm ứng dụng nhập điểm 3 môn Toán, Văn, Anh của học sinh và hiển thị điểm Trung Bình cùng kết luận học lực: (<5 : học yếu, 5-6.5 : học trung bình; 6.5-8.5: học Khá; >8.5 học Giỏi)

Ví dụ màn hình dưới:

Bạn có thể xem code tham khảo ở đây .

Kết luận: Những widget trên là những widget rất phổ biến trong quá trình xây dựng màn hình ứng dụng Flutter. Mỗi Widget có vai trò và nhiệm vụ khác nhau nhưng chúng đều có điểm giống về nhóm thuộc tính, mỗi widget gồm 2 nhóm thuộc tính là : thuộc tính mang tính liên kết với widget con: child, children, body, home và nhóm thuộc tính đặc điểm nơi để thể hiện màu sắc, hình dạng..
Qua bài viết này và bài viết về cách xây dựng màn hình ứng dụng Flutter các bạn đã phần nào nắm được cách xây dựng một ứng dụng Flutter. Chúc các bạn có được nhiều kiến thức từ 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 *