Trong Flutter, widgets là các thành phần cơ bản dùng để xây dựng giao diện người dùng. Có hai loại widget chính: Stateful Widget và Stateless Widget. Mỗi loại có cách thức hoạt động và sử dụng riêng. Dưới đây là phân biệt chi tiết giữa chúng.
Stateless Widget là loại widget không có trạng thái (state) thay đổi trong suốt vòng đời của nó. Nghĩa là, khi widget này được xây dựng, nó sẽ không thay đổi giá trị của mình, trừ khi nó được xây dựng lại bởi một widget cha. Stateless Widget thường được sử dụng cho các giao diện tĩnh mà không cần thay đổi theo thời gian hoặc tương tác của người dùng.
Cách sử dụng: Để sử dụng Stateless Widget, bạn cần kế thừa từ lớp StatelessWidget và ghi đè phương thức build để định nghĩa giao diện của widget.
import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Center(
child: Text(
'This is a Stateless Widget',
style: TextStyle(color: Colors.white),
),
),
);
}
}Stateful Widget là loại widget có trạng thái có thể thay đổi trong suốt vòng đời của nó. Điều này có nghĩa là widget có thể cập nhật và thay đổi giao diện của mình dựa trên tương tác của người dùng hoặc các sự kiện bên ngoài. Khi trạng thái thay đổi, widget sẽ được xây dựng lại để phản ánh sự thay đổi đó.
Cách sử dụng: Để sử dụng Stateful Widget, bạn cần kế thừa từ lớp StatefulWidget và ghi đè phương thức createState để trả về một đối tượng State mà sẽ quản lý trạng thái của widget.
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Button pressed $_counter times',
style: TextStyle(color: Colors.white),
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}Việc chọn giữa Stateless và Stateful Widget phụ thuộc vào yêu cầu cụ thể của giao diện mà bạn đang xây dựng. Nếu bạn cần một widget tĩnh mà không thay đổi, hãy sử dụng Stateless Widget. Ngược lại, nếu bạn cần một widget có thể thay đổi trạng thái, hãy chọn Stateful Widget. Hiểu rõ sự khác biệt giữa chúng sẽ giúp bạn xây dựng ứng dụng Flutter hiệu quả hơn.
