NHỮNG WIDGET THƯỜNG DÙNG TRONG FLUTTER

 https://baoflutter.com/nhung-widget-thuong-dung-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ụ :

1 2 3 4 5 6

Container( color: Colors.blue, height: 300, weight: 300, child: Text("Widget con"), )

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@override   Widget build(BuildContext context) {       return MaterialApp(       // Tạo Title của AppBar       title: 'Flutter Demo',              // false : tắt label "Debug" bên phải, default: true       debugShowCheckedModeBanner: false,              // Xây dựng Theme       theme: ThemeData(         primarySwatch: Colors.blue,         visualDensity: VisualDensity.adaptivePlatformDensity,       ),         // Liên kết với Widget con qua từ khoá home:       home: MyHomePage(),     );   }

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.

1 2 3 4 5 6 7 8 9 10 11 12

@override   Widget build(BuildContext context) {     return Scaffold(       // Tạo Appbar       appBar: AppBar(         title: Text(widget.title),       ),       // Liên kết với Widget con qua thuộc tính body:       body: Center(   //...... ), }

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ụ :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@override   Widget build(BuildContext context) {     // TODO: implement build     return MaterialApp(       home: Scaffold(           body: Center (         // Đặt Container vào giữa màn hình Scaffold           child: Container(          //...........            ),          )       ); }

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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

@override   Widget build(BuildContext context) {     // TODO: implement build     return MaterialApp(         home: Scaffold(           body: Center (           child: Container(             // Tạo màu cho Container             color: Colors.lightBlue,              // Tạo kích thước của Container              width: 300,              height: 300,              child: Column(             children: <Widget>[                 TextField(                 decoration: InputDecoration(                   border: OutlineInputBorder(),                   labelText: "TextField 1"                 ),               ),                 TextField(                 decoration: InputDecoration(                     border: OutlineInputBorder(),                     labelText: "TextField 2"                 ),               ),                // Tạo khoảng cách giữa TextField và Text               SizedBox(height: 20),                 Text("Text Widget "),               // Tạo khoảng cách giữa Text và RaisedButton               SizedBox(height: 20),                 RaisedButton(                 child: Text("Raise Button"),               ),             ],           ),           ),         ),       ),     );   }

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:

1 2 3 4 5 6 7 8 9 10

// Tạo khoảng cách giữa TextField và Text SizedBox(height: 20),   Text("Text Widget "), // Tạo khoảng cách giữa Text và RaisedButton SizedBox(height: 20),   RaisedButton( child: Text("Raise Button"),       ),

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

child: Column(              // Căn để các widget con ở giữa trục dọc              mainAxisAlignment: MainAxisAlignment.center,                // Căn để các widget con ở giữa trục ngang             crossAxisAlignment: CrossAxisAlignment.center,             children: <Widget>[                 TextField(                 decoration: InputDecoration(                   border: OutlineInputBorder(),                   labelText: "TextField 1"                 ),               ),                 TextField(                 decoration: InputDecoration(                     border: OutlineInputBorder(),                     labelText: "TextField 2"                 ),               ),                // Tạo khoảng cách giữa TextField và Text               SizedBox(height: 20),                 Text("Text Widget "),               // Tạo khoảng cách giữa Text và RaisedButton               SizedBox(height: 20),                 RaisedButton(                 child: Text("Raise Button"),               ),             ],           ),

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ụ:

1 2 3 4 5 6 7 8 9

RaisedButton(           child: Text("tên Button"),           onPressed:  () {             // hàm thực thi sau khi nhấn nút               });             }           }           );

Text

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

1 2 3 4 5 6 7 8 9

Text(                     " chuỗi hiển thị",                   // Thay đổi kiểu text                   style: TextStyle(                     fontSize: 20,                     fontStyle: FontStyle.italic,                     fontFamily: "Kiểu Font chữ"                   ),                   ),

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

double diemToan; Widget nhapDiemToan()   {     return SizedBox(         width: 240,         child: TextField(           maxLines: 1,           autofocus: true,           decoration: new InputDecoration(             hintText: " Nhập Điểm Môn Toán",             ),           // Lấy giá trị từ chuỗi đã nhập           onChanged: (value)           {             setState(() {               diemToan = double.parse(value);             });           },         )     );   }

Để 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..