StatelessWidget và StatefulWidget trong Flutter

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 StatelessWidgetlà 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 Widgetcó 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 ý:

1. Dữ liệu được widget sử dụng và có thể thay đổi.
2. 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 build.

Trong ví dụ này, bạn có thể thấy setState được gọi trong phương thức _MyHomePageState.increaseCount. Đ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ức createState.
• State object phải implement phương thức build.
• StatefulWidget là bất biến.
• State object có thể thay đổi.