Trong thế giới phát triển ứng dụng di động, Flutter nổi bật với khả năng xây dựng giao diện người dùng đẹp mắt và hiệu quả. Hai loại widget cơ bản mà Flutter cung cấp là StatelessWidget và StatefulWidget, mỗi loại có những đặc điểm và ứng dụng riêng biệt. StatelessWidget đại diện cho những thành phần giao diện không có trạng thái, luôn hiển thị nội dung tĩnh, trong khi StatefulWidget cho phép xây dựng các thành phần có thể thay đổi trạng thái, cập nhật giao diện theo tương tác của người dùng. Bài viết này sẽ đi sâu vào từng loại widget, so sánh chúng và cung cấp các ví dụ thực tiễn, giúp bạn hiểu rõ hơn về cách sử dụng hiệu quả hai loại widget này trong Flutter.
Để hiểu rõ hơn về sự khác biệt giữa StatelessWidget và StatefulWidget trong Flutter, chúng ta sẽ đi sâu vào từng loại widget, cách sử dụng của chúng, và cung cấp ví dụ cụ thể.
StatelessWidget là loại widget trong Flutter mà không có trạng thái thay đổi. Điều này có nghĩa là khi một StatelessWidget được tạo ra, nó sẽ không bao giờ thay đổi nội dung của nó trừ khi widget cha của nó xây dựng lại nó.
Bạn nên sử dụng StatelessWidget trong các trường hợp như:
Dưới đây là một ví dụ về cách sử dụng StatelessWidget:
import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateless Widget Example'),
),
body: Center(
child: Text(
'Hello, Stateless Widget!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
Trong ví dụ trên, MyStatelessWidget không có trạng thái có thể thay đổi. Mọi thứ sẽ được xây dựng lại khi widget được gọi lại, nhưng nội dung của nó sẽ luôn như nhau.
Ngược lại, StatefulWidget là loại widget có thể thay đổi trạng thái. Điều này có nghĩa là khi trạng thái của widget thay đổi, nó có thể tự động cập nhật giao diện mà không cần phải xây dựng lại từ đầu.
StatefulWidget nên được sử dụng trong các trường hợp như:
Dưới đây là một ví dụ về cách sử dụng StatefulWidget:
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Trong ví dụ này, MyStatefulWidget có một biến _counter để theo dõi số lần người dùng đã nhấn nút. Khi nút được nhấn, hàm _incrementCounter được gọi, và setState() được sử dụng để cập nhật giá trị của _counter. Khi giá trị này thay đổi, build sẽ được gọi lại và giao diện sẽ được cập nhật với số lần nhấn.
setState() để thông báo cho Flutter biết rằng có sự thay đổi trạng thái cần cập nhật.
