Rate this post

State của ứng dụngFlutter rất có thể được định nghĩa đơn giản là bất kỳ thứ gì tồn tại trong bộ nhớ của ứng dụng khi ứng dụng đang chạy. Điều này bao gồm tất cả các tiện ích duy trì giao diện người dùng của ứng dụng bao gồm các Button, font chữ văn bản, icon, animatiob, v.v. Vì vậy, bây giờ khi chúng ta biết những state này là gì, hãy đi thẳng vào chủ đề chính của chúng ta, tức là những tiện ích state và không state này là gì và chúng khác nhau như thế nào.

Tóm tắt nội dung

Widget trong Futter là gì?

Các widget là hệ thống phân cấp Class trong Framework Flutter. Widget là một thành phần giao diện người dùng. Các widget có thể là các phần tử, hoặc tập hợp nhiều phần tử sử dụng để xây dựng giao diện có thể được tái sử dụng.

Các bài viết liên quan:

State trong Flutter

State là thông tin có thể được đọc đồng bộ khi tiện ích con được xây dựng và có thể thay đổi trong suốt thời gian tồn tại của tiện ích con.

Nói cách khác, state của widget là dữ liệu của các đối tượng mà các thuộc tính (tham số) của nó đang duy trì tại thời điểm tạo ra nó (khi widget được vẽ trên màn hình). State cũng có thể thay đổi khi nó được sử dụng, chẳng hạn như khi một tiện ích CheckBox được nhấp vào, một dấu kiểm xuất hiện trên hộp.

Stateless Widget:

Các widget có state không thể thay đổi sau khi chúng được xây dựng được gọi là Stateless Widget. Các widget này là bất biến sau khi chúng được xây dựng, tức là bất kỳ thay đổi nào trong các biến, icon, Button hoặc dữ liệu truy xuất đều không thể thay đổi state của ứng dụng. Dưới đây là cấu trúc cơ bản của một Stateless Widget. Stateless Widget ghi đè phương thức build () và trả về một widget. Ví dụ: chúng tôi sử dụng text hoặc icon là ứng dụng trong đó state của tiện ích không thay đổi trong thời gian chạy. Nó được sử dụng khi giao diện người dùng phụ thuộc vào thông tin bên trong chính đối tượng. Các ví dụ khác có thể là Text, RaisedButton, Icon Buttons.

Vì vậy, chúng ta hãy xem đoạn mã nhỏ này cho chúng ta biết những gì. Tên của Stateless Widget là MyApp đang được gọi từ runApp () và kế thừa từ class StatelessWidget. Bên trong MyApp này, một hàm constructor được ghi đè và lấy BuildContext làm tham số. BuildContext này là duy nhất cho mỗi widget vì nó được sử dụng để định vị widget bên trong cây widget.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return Container();
}
}

Lưu ý: Các widget của ứng dụng Flutter được hiển thị dưới dạng Cây widget, nơi chúng tôi kết nối các widget cha và con để hiển thị mối quan hệ giữa chúng, sau đó kết hợp lại để tạo thành state của ứng dụng của bạn.

Hàm constructor chứa một vùng chứa một lần nữa là một tiện ích con của Flutter, bên trong chúng ta sẽ thiết kế giao diện người dùng của ứng dụng. Trong ứng dụng stateless, hàm constructor chỉ được gọi một lần tạo nên giao diện người dùng của màn hình.

Xem thêm Giới thiệu về Gestures trong Flutter

Stateful Widgets:

Các Stateful Widgets có thể thay đổi khi chúng được xây dựng được gọi là các widget state. Những state này có thể thay đổi được và có thể thay đổi nhiều lần trong thời gian tồn tại của chúng. Điều này đơn giản có nghĩa là state của một ứng dụng có thể thay đổi nhiều lần với các bộ biến, input, dữ liệu khác nhau. Dưới đây là cấu trúc cơ bản của một widget state. Class Stateful ghi đè createState () và trả về một state. Nó được sử dụng khi giao diện người dùng có thể thay đổi động. Một số ví dụ có thể là CheckBox, RadioButton, form, text.

Các lớp kế thừa “Stateful Widget” là bất biến. Nhưng State có thể thay đổi, thay đổi trong thời gian chạy khi người dùng tương tác với nó.

Vì vậy, hãy để chúng tôi xem những gì chúng tôi có trong đoạn mã này. Tên của Stateful Widget là MyApp được gọi từ runApp () và kế thừa một widget state. Trong lớp MyApp, chúng tôi ghi đè chức năng tạo state. Hàm createState () này được sử dụng để tạo state có thể thay đổi cho tiện ích con này tại một vị trí nhất định trong cây.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
	return Container();
}
}

Phương thức này trả về một thể hiện cho lớp con state được tôn trọng. Lớp khác là _MyAppState mở rộng state, lớp này quản lý tất cả các thay đổi trong class con. Bên trong class này, hàm constructor bị ghi đè, lấy BuildContext làm tham số.

Hàm constructor này trả về widget mà chúng tôi thiết kế giao diện người dùng của ứng dụng. Vì nó là một widget state nên hàm xây dựng được gọi nhiều lần để tạo ra toàn bộ giao diện người dùng một lần nữa với tất cả các thay đổi.

Stateless hữu ích khi một phần của giao diện người dùng mà bạn đang mô tả không phụ thuộc vào bất kỳ thông tin nào khác ngoài thông tin cấu hình và BuildContext trong khi tiện ích Stateful hữu ích khi một phần của giao diện người dùng mà bạn đang mô tả có thể thay đổi động.

Cách tạo widget trong flutter

Như chúng ta đã tìm hiểu ở phần trước, Widgets là mọi thứ trong framework Flutter. Chúng ta đã học được cách tạo một widget mới ở phần trước.
Trong phần này, ta sẽ cùng tìm hiểu về các khái niệm đằng sau việc tạo widget và các kiểu widget khác nhau có trong framework Flutter.
Ta cùng xem widget MyHomePage trong ứng dụng Hello World sau đây nhé:

Tại đây ta tạo một widget mới và kế thừa nó với StatelessWidget
Lưu ý rằng StatelessWidget yêu cầu duy nhất một phương thức build để có thể thực thi được trong lớp dẫn xuất của nó. Phương thức build này sẽ lấy môi trường của context cần thiết để xây dựng nên những widgets thông qua tham số BuildContext và sẽ trả về widget mà nó đã xây dựng.
Trong đoạn code, ta sử dụng title như là một trong những đối số của hàm dựng và đồng thời sử dụng Key như một đối số khác. title được sử dụng để hiển thị tiêu đề và Key được sử dụng để nhận dạng một widget trong môi trường xây dụng widget.
Tại đây, phương thức build sẽ gọi phương thức build trong Scaffold, sau đó nó sẽ gọi các phương thức build như AppBar và Center để xây dựng giao diện người dùng của nó.
Cuối cùng thì phương thức build của Center sẽ gọi phương thức build của Text.
Để dễ hiểu hơn thì ta cùng xem hình dưới đây.

Mô phỏng hóa cách xây dựng Widget

Trong Flutter, các widget có thể được nhóm vào trong nhiều chủng loại khác nhau dựa trên các chức năng của chúng, ta sẽ có danh sách như sau:

Platform specific widgets

Flutter có những widget đặc biệt cụ thể cho tửng nền tảng riêng biệt như là Android hoặc iOS.
Các widget sử dụng cho Android được thiết kế dựa vào Material design guideline của Android OS. Các widget này được gọi là Material widgets.
Các widget cho hệ điều hành iOS được xây dựng theo Human Interface guidelines bởi Apple có tên là Cupertino widgets.
Các material widget được dùng phổ biến nhất được liệt kê theo danh sách dưới đây:

Scaffold, AppBar, BottomNavigationBar, TabBar, TabBarView, ListTile, RaisedButton, FloatingActionButton, FlatButton, IconButton, DropdownButton, PopupMenuButton, ButtonBar, TextField, Checkbox, Radio, Switch, Slider, Date & Time Pickers, SimpleDialog, AlertDialog.

Các Cupertino widget được dùng phổ biến nhất được liệt kê theo danh sách dưới đây:

CupertinoButton, CupertinoPicker, CupertinoDatePicker, CupertinoTimerPicker, CupertinoNavigationBar, CupertinoTabBar, CupertinoTabScaffold, CupertinoTabView, CupertinoTextField, CupertinoDialog, CupertinoDialogAction, CupertinoFullscreenDialogTransition, CupertinoPageScaffold, CupertinoPageTransition, CupertinoActionSheet, CupertinoActivityIndicator, CupertinoAlertDialog, CupertinoPopupSurface, CupertinoSlider

Layout widgets

Trong Flutter, một widget có thể được tạo bằng cách kết hợp giữa một hoặc nhiều widget. Để kết hợp nhiều widget vào một widget, Flutter cung cấp một lượng lớn các widget có chức năng layout. Ví dụ như một widget con có thể được canh lề bằng widget Center.
Các layout widget phổ biến:

Container – Là một cái hộp hình chữ nhật được trang trí bằng cách sử dụng widget BoxDecoration ở nền, đường biên và đổ bóng.
Center – canh giữa widget con của nó.
Row – xếp các con của nó theo chiều ngang.
Column − xếp các con của nó theo chiều dọc.
Stack – xếp các con của nó trồng lên nhau.

State maintenance widgets

Trong Flutter, tất cả các widget được chia ra từ 2 widget chính đó là StatelessWidget hoặc StatefulWidget.
Widget StatelessWidget không thông tin trạng thái (state) nào nhưng nó có thể chứa widget có StatefulWidget. Bản chất linh hoạt của ứng dụng là thông qua các hành vi tượng tác của các widget và cách trạng thái thay đổi trong tương tác. Ví dụ như, khi ta chạm một nút đếm thì nó sẽ tăng hoặc giảm trạng thái bên trong của nút đếm bằng một và widget sẽ tự động re-render lại widget sử dụng một thông tin trạng thái hoàn toàn mới.

Platform independent / basic widgets

Flutter cung cấp một lượng lớn các widget cơ bản để tạo một giao diện cơ bản cũng như phức tạp trong các nền tảng độc lập.

Text

Widget Text được sử dụng để hiển thị 1 chuỗi. Định dạng của chuỗi có thể được đặt bằng cách sử dụng thuộc tính style và lớp TextStyle. Ví dụ như sau:

Widget Text có một hàm dựng đặc biệt là Text.rich. Nó chấp nhận con của loại TextSpan có định dạng chuỗi khác nhau. Widget TextSpan đệ quy chính nó và nó chấp nhận TextSpan như là con của nó. Ví dụ như ta có đoạn code như sau:

Các thuộc tính quan trọng nhất của widget Text như sau:
maxLines, int – số dòng tối đa có thể hiện thị

overflow, TextOverFlow – Cho chúng ta thấy được cách sử lý tràn dữ liệu bằng cách sử dụng lớp TextOverFlow
style, TextStyle – Cụ thể hóa định dạng của chuỗi bằng cách sử dụng lớp TextStyle
TextAlign, TextAlign – căn đều một văn bản như căn trái, phải giữa, v.v… bằng lớp TextAlign
textDirection, TextDirection – điều hướng cho văn bản, từ trái qua phải hoặc từ phải qua trái

Image

Widget Image được sử dụng để hiển thị hình ảnh trong ứng dụng. Widget Image cung cấp các hàm dựng khác nhau để nạp các hình ảnh từ các người và chúng được định nghĩa như sau:

Image – bộ tải hình ảnh chung sử dụng lớp ImageProvider
Image.asset – tải các hình từ assets của project
Image.file – tải hình từ thư mục hệ thống
Image.memory – tải hình từ bộ nhớ
Image.Network – tải hình từ mạng
Lựa chọn đơn giản nhất để tải và hiển thị một tấm hình trong Flutter là chuyển một tấm hình thành assets trong ứng dụng và tải chúng vào widget như mong muốn.
Tạo một thư mục assets trong thư mục project và đặt hình ảnh mong muốn vào trong.