Bài viết này mình sẽ giới thiệu về widget, một trong những nền tảng của ứng dụng Flutter

Nền tảng widget

Trong phần này, chúng ta sẽ tìm hiểu khái niệm về một widget, cách tạo nó và các loại khác nhau của chúng có sẵn trong Flutter framework. Chúng ta đã biết trước đó rằng mọi thứ trong Flutter đều là một widget.

Nếu bạn đã quen thuộc với React hoặc Vue.js, thì bạn sẽ dễ dàng hiểu được Flutter.

Bất cứ khi nào bạn định viết mã để xây dựng bất cứ thứ gì trong Flutter, nó sẽ nằm bên trong một widget. Mục đích chính là xây dựng ứng dụng từ các widget. Nó mô tả chế độ xem ứng dụng của bạn trông như thế nào với cấu hình và trạng thái hiện tại của chúng. Khi bạn thực hiện bất kỳ thay đổi nào trong mã, widget con sẽ xây dựng lại mô tả của nó bằng cách tính toán sự khác biệt của widget con hiện tại và trước đó để xác định những thay đổi tối thiểu đối với việc hiển thị trong giao diện người dùng của ứng dụng.

Các widget được lồng vào nhau để xây dựng ứng dụng. Nó có nghĩa là thư mục gốc của ứng dụng của bạn tự nó là một widget, và bản thân nó cũng là một widget. Ví dụ: một widget có thể hiển thị một thứ gì đó, có thể xác định thiết kế, có thể xử lý tương tác, v.v.

Hình ảnh dưới đây là một mô tả trực quan đơn giản của cây widget.

Chúng ta có thể tạo Flutter widgets như sau:

Class ImageWidget extends StatelessWidget {  
// Class Stuff  
}

Hello World Example

import ‘package:flutter/material.dart’;  

class MyHomePage extends StatelessWidget {    
  MyHomePage({Key key, this.title}) : super(key: key);    
  // This widget is the home page of your application.    
  final String title;    

  @override    
  Widget build(BuildContext context) {    
    return Scaffold(    
      appBar: AppBar(    
        title: Text(this.title),    
      ),    
      body: Center(    
        child: Text(‘Hello World’),    
      ),    
    );    
  }    
}    

Các kiểu Widget

Chúng ta có thể chia tiện ích Flutter thành hai loại:

1. Hiển thị (Đầu ra và Đầu vào)

2. Vô hình (Bố cục và Kiểm soát)

Widget hiển thị

Các widget hiển thị có liên quan đến dữ liệu đầu vào và đầu ra của người dùng. Một số loại quan trọng của widget con này là: văn bản

Widget Văn bản giữ một số văn bản để hiển thị trên màn hình. Chúng ta có thể căn chỉnh widget văn bản bằng cách sử dụng thuộc tính textAlign và thuộc tính style cho phép tùy chỉnh Văn bản bao gồm phông chữ, độ đậm của phông chữ, kiểu phông chữ, khoảng cách giữa các chữ cái, màu sắc và nhiều thứ khác. Chúng ta có thể sử dụng nó như các đoạn mã dưới đây.

new Text(     
'Hello, Javatpoint!',     
textAlign: TextAlign.center,       
style: new TextStyle(fontWeight: FontWeight.bold),   
)  

Nút

Widget này cho phép bạn thực hiện một số hành động khi nhấp chuột. Flutter không cho phép bạn sử dụng trực tiếp widget Nút; thay vào đó, nó sử dụng một loại nút như FlatButton và RaisedButton. Chúng ta có thể sử dụng nó như các đoạn mã dưới đây.

//FlatButton Example  
new FlatButton(  
  child: Text("Click here"),  
  onPressed: () {  
    // Do something here  
  },  
),  
  
//RaisedButton Example  
new RaisedButton(  
  child: Text("Click here"),  
  elevation: 5.0,  
  onPressed: () {  
    // Do something here  
  },  
),  

Trong ví dụ trên, thuộc tính onPressed cho phép chúng ta thực hiện một hành động khi bạn nhấp vào nút và thuộc tính độ cao được sử dụng để thay đổi mức độ nổi bật của nó.

Hình ảnh

Widget con này chứa hình ảnh có thể tìm nạp hình ảnh từ nhiều nguồn như từ thư mục nội dung hoặc trực tiếp từ URL. Nó cung cấp nhiều hàm tạo để tải hình ảnh, được đưa ra dưới đây:

• Image: Đây là một trình tải hình ảnh chung, được sử dụng bởi ImageProvider.

• asset: Nó tải hình ảnh từ thư mục tài sản dự án của bạn.

• file: Nó tải hình ảnh từ thư mục hệ thống.

• memory: Nó tải hình ảnh từ bộ nhớ.

• network: Nó tải hình ảnh từ mạng. Để thêm hình ảnh vào dự án, trước tiên bạn cần tạo một thư mục nội dung nơi bạn lưu giữ hình ảnh của mình và sau đó thêm dòng bên dưới vào tệp pubspec.yaml.

assets:  
  - assets/  

Bây giờ, thêm dòng sau vào tệp Dart

Image.asset('assets/computer.png')

Mã nguồn hoàn chỉnh để thêm hình ảnh được hiển thị bên dưới trong ví dụ hello world.

class MyHomePage extends StatelessWidget {  
  MyHomePage({Key key, this.title}) : super(key: key);  
  // This widget is the home page of your application.  
  final String title;  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text(this.title),  
      ),  
      body: Center(  
        child: Image.asset('assets/computer.png'),  
      ),  
    );  
  }  
}  

Khi bạn chạy ứng dụng, nó sẽ đưa ra kết quả sau.

Biểu tượng

Widget này hoạt động như một thùng chứa để lưu trữ Biểu tượng trong Flutter. Đoạn mã sau đây giải thích rõ ràng hơn.

new Icon(  
  Icons.add,  
  size: 34.0,  
)  

Widget ẩn

Các widget vô hình có liên quan đến cách bố trí và kiểm soát các widget. Nó cung cấp việc kiểm soát cách các widget thực sự hoạt động và cách chúng sẽ hiển thị trên màn hình. Một số loại widget quan trọng là:

Cột

Một widget cột là một loại widget sắp xếp tất cả các widget con của nó theo một hàng dọc. Nó cung cấp khoảng cách giữa các widget bằng cách sử dụng các thuộc tính mainAxisAlignment và crossAxisAlignment. Trong các thuộc tính này, trục chính là trục tung, và trục chéo là trục hoành.

Thí dụ

Các đoạn mã dưới đây xây dựng hai phần tử widget con theo chiều dọc.

new Column(  
  mainAxisAlignment: MainAxisAlignment.center,  
  children: <Widget>[  
    new Text(  
      "VegElement",  
    ),  
    new Text(  
      "Non-vegElement"  
    ),  
  ],  
),  

Hàng

Widget con hàng tương tự như widget con cột, nhưng nó xây dựng một widget con theo chiều ngang chứ không phải theo chiều dọc. Ở đây, trục chính là trục hoành, và trục chéo là trục tung.

Thí dụ

 Các đoạn mã dưới đây xây dựng hai phần tử widget theo chiều ngang.

new Row(  
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
  children: <Widget>[  
    new Text(  
      "VegElement",  
    ),  
    new Text(  
      "Non-vegElement"  
    ),  
  ],  
),  

Trung tâm

Widget con này được sử dụng để căn giữa widget con, nằm bên trong nó. Tất cả các ví dụ trước đều chứa bên trong widget trung tâm.

Thí dụ

Center(  
  child: new clumn(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
    children: <Widget>[  
      new Text(  
        "VegElement",  
      ),  
      new Text(  
        "Non-vegElement"  
      ),  
    ],  
  ),  
),  

Đệm lót

Widget này bao bọc các widget khác để cung cấp cho chúng phần đệm theo các hướng được chỉ định. Bạn cũng có thể cung cấp đệm theo mọi hướng. Chúng ta có thể hiểu nó từ ví dụ dưới đây cung cấp cho phần đệm widget văn bản là 6.0 theo mọi hướng.

Thí dụ

Padding(  
  padding: const EdgeInsets.all(6.0),  
  child: new Text(  
    "Element 1",  
  ),  
),  

Scaffold

Widget con này cung cấp một khuôn khổ cho phép bạn thêm các yếu tố thiết kế material design phổ biến như AppBar, Floating Action Buttons, Drawers, v.v. Stack

Nó là một widget thiết yếu, được sử dụng chủ yếu để chồng lên một widget, chẳng hạn như một nút trên nền gradient.

Widget quản lý

Trong Flutter, chủ yếu có hai loại widget:

• StatelessWidget

• StatefulWidget

StatefulWidget

StatefulWidget có thông tin trạng. Nó chủ yếu chứa hai lớp: đối tượng trạng thái và widget con. Nó là động vì nó có thể thay đổi dữ liệu bên trong trong suốt thời gian tồn tại của widget. Widget con này không có phương thức build (). Nó có phương thức createState (), trả về một lớp mở rộng Lớp trạng thái Flutters. Các ví dụ của StatefulWidget là Checkbox, Radio, Slider, InkWell, Form và TextField.

Ví dụ:

class Car extends StatefulWidget {  
  const Car({ Key key, this.title }) : super(key: key);   
  
  @override  
  _CarState createState() => _CarState();  
}  
  
class _CarState extends State<Car> {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      color: const Color(0xFEEFE),  
           child: Container(  
            child: Container( //child: Container() )  
        )  
    );  
  }  
}  

StatelessWidget

StatelessWidget không có bất kỳ thông tin trạng thái nào. Nó vẫn tĩnh trong suốt vòng đời của nó. Các ví dụ về StatelessWidget là Văn bản, Hàng, Cột, Vùng chứa, v.v.

Thí dụ

class MyStatelessCarWidget extends StatelessWidget {  
  const MyStatelessCarWidget ({ Key key }) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Container(color: const Color(0x0xFEEFE));  
  }  
}  

Cuối cùng

Cám ơn bạn đã theo dõi bài viết về Widget, một trong những nền tảng của ứng dụng Flutter, ngoài ra các bạn có thể xem thêm các nội dung khác trong chuyên mục lập trình Flutter được chia sẻ bởi Nguyễn Hưng.