Các Widgets trong Flutter thường sẽ extend từ một số ít các class trong Flutter library. Phổ biến nhất trong số đó là 2 widgets StatelessWidget
và StatefulWidget
.
Sự khác biệt giữa hai widgets cơ bản này đến từ một khái niệm State. State được sử dụng để Flutter có thể biết được rằng: khi nào widget nên render và re-render. Hôm nay chúng ta cùng tìm hiểu về StatelessWidget và StatefulWidget trong Flutter.
StatelessWidget
Một StatelessWidget
là một widget không có thông tin nào được lưu giữ trong đó. Stateless widget không có state. Nó không chấp nhận sự thay đổi bên trong nó. Còn đối với sự thay đổi từ bên ngoài (widget cha) thì nó sẽ thụ động thay đổi theo. Công việc duy nhất của nó là hiển thị thông tin và giao diện người dùng. Bản thân StatelessWidget cũng không có hàm createState
mà thay vào đó là hàm build(BuildContext)
Ví dụ về một StatelessWidget:
class TitleText extends StatelessWidget {
final String text;
TitleText(this.text);
@override
Widget build(BuildContext context) {
return Center(
child: Text(text)
);
}
}
Khi tạo một StatelessWidget yêu cầu phải extends đúng class StatelessWidget và phải bao gồm một phương thức build.

StatefulWidget
Một Stateful Widget
có một chút khác biệt so với StatelessWidget. Nó gồm hai class: một State
object và widget chính. Mục đích của class này là duy trì state khi Flutter re-render các widget.
Ở đây sẽ có bạn nhầm lẫn cho rằng State là trạng thái của các biến. Nhưng thực tế State là trạng thái của cả 1 widget.
Trong Flutter, khái niệm state được định nghĩa bởi hai ý:
- Dữ liệu được widget sử dụng và có thể thay đổi.
- Không thể đọc đồng bộ dữ liệu khi widget được build. (Tất cả state phải được thiết lập vào thời điểm phương thức
build
được gọi).
State đặc biệt ở chỗ nó có một số phương thức tương tác với Flutter theo những cách khác nhau. Điều quan trọng nhất trong số đó là setState
.
setState
được sử dụng để nói với Flutter rằng nó cần phải rerender, thường là do có điều gì đó đã thay đổi và màn hình cần phản ánh điều đó. Sau khi setState
được gọi, Flutter biết rằng nó cần gọi lại phương thức buil
d.
Trong ví dụ này, bạn có thể thấy setState được gọi trong phương thức _MyHomePageState.increaseCoun
t. Điều đó sẽ làm tăng giá trị biếncounter
và giá trị đó sẽ được hiển thị khi build
được gọi lại (được thực hiện tự động).
class Counter extends StatefulWidget {
Counter({Key key, this.title}) : super(key: key);
// Stateful Widgets don't have build methods.
// They have createState() methods.
// Create State returns a class that extends Flutters State class.
@override
_MyHomePageState createState() => new _MyHomePageState();
// Stateful Widgets are rarely more complicated than this.
}
class _MyHomePageState extends State<MyHomePage> {
int counter = 0;
void increaseCount() {
// setState is a special method that tells Flutter to repaint
// the view because state has been updated!
setState(() {
this.counter++;
}
}
// gotta have that build method!
Widget build(context) {
return new RaisedButton(
onPressed: increaseCount,
child: new Text('Tap to Increase'),
);
}
}
Điều quan trọng:
- Các
StatefulWidget
class phải gọi đến phương thứccreateState
. State
object phải implement phương thứcbuild
.StatefulWidget
là bất biến.State
object có thể thay đổi.