Tạo bởi Trần Văn Điêp|
Lập Trình Flutter

Stateful vs Stateless Widget, setState() - Lập Trình Flutter

Trong hành trình học Flutter, một trong những khái niệm quyết định cách bạn thiết kế giao diện và quản lý dữ liệu là Stateful vs Stateless Widget, setState(). Hiểu rõ sự khác nhau giữa widget có trạng thái và không trạng thái, cùng cách sử dụng setState() đúng cách, sẽ giúp bạn tránh được lỗi phổ biến, viết mã dễ bảo trì và tối ưu hiệu năng ứng dụng. Với Flutter, mọi thứ đều là widget — nhưng không phải widget nào cũng giống nhau: một số chỉ trình bày dữ liệu tĩnh, còn một số khác cần phản hồi khi dữ liệu thay đổi.

Bài viết này đi sâu, giải thích logic, cấu trúc và ví dụ thực tế về Stateful vs Stateless Widget, setState(), kèm lời khuyên thiết kế và các tình huống nên dùng. Dù bạn là người mới học Flutter hay đã có kinh nghiệm, nắm vững chủ đề này sẽ giúp bạn đưa ra quyết định đúng đắn khi xây dựng UI, lựa chọn mô hình quản lý state và tránh các bẫy phổ biến như rebuild thừa, leak memory, hay UI không cập nhật. Chuẩn bị sẵn IDE, mở project Flutter của bạn và cùng thực hành từng ví dụ trong bài để cảm nhận sự khác biệt trực tiếp.

Tổng quan: Stateful và Stateless là gì và tại sao quan trọng

Trong Flutter, widget được phân thành hai loại chính: StatelessWidget và StatefulWidget. Sự phân chia này không chỉ là điều kiện kỹ thuật mà còn ảnh hưởng trực tiếp tới cách bạn tổ chức code, hiệu năng và trải nghiệm người dùng.

  • StatelessWidget: là widget “không thay đổi” sau khi được tạo. Nó phù hợp cho các phần UI chỉ hiển thị dữ liệu cố định hoặc dữ liệu được truyền từ cha mà bản thân widget không chịu trách nhiệm thay đổi. Ví dụ: logo, tiêu đề tĩnh, biểu tượng.

  • StatefulWidget: là widget “có trạng thái” và có thể thay đổi theo thời gian, ví dụ khi người dùng nhập liệu, nhấn nút, hay khi có dữ liệu từ network. StatefulWidget đi kèm một đối tượng State chứa trạng thái và phương thức setState() để báo cho framework rằng UI cần được rebuild.

Tầm quan trọng của phân biệt này nằm ở chỗ:

  • Tránh rebuild không cần thiết (giúp tiết kiệm CPU/GPU).

  • Giúp tách trách nhiệm rõ ràng: UI tĩnh vs UI tương tác.

  • Là nền tảng để lựa chọn chiến lược quản lý state (local state vs global state).

Khi bạn hiểu bản chất của Stateful vs Stateless Widget, setState(), bạn sẽ biết khi nào dùng setState() trực tiếp, khi nào nên chuyển trạng thái ra ngoài bằng Provider, Riverpod, Bloc hoặc Redux.

Hiểu sâu về StatelessWidget: đặc điểm, ví dụ và best practice

Đặc điểm của StatelessWidget

StatelessWidget là một lớp cơ bản cho widget không có trạng thái thay đổi trong suốt vòng đời. Khi StatelessWidget được tạo, phương thức build() được gọi để trả về cấu trúc UI dựa trên các tham số truyền vào. Nếu tham số cha truyền vào thay đổi, Flutter sẽ tạo lại widget cha và có thể rebuild StatelessWidget với tham số mới — nhưng bản thân nó không chứa state nội bộ.

Ví dụ thực tế

class AppLogo extends StatelessWidget {
  final double size;
  const AppLogo({super.key, this.size = 48});

  @override
  Widget build(BuildContext context) {
    return Image.asset('assets/logo.png', width: size, height: size);
  }
}

AppLogo đơn giản, dễ test, và có thể tái sử dụng.

Khi nào nên dùng StatelessWidget

  • Thành phần UI hiển thị dữ liệu tĩnh hoặc được truyền từ parent.

  • Component tái sử dụng, dễ test (unit test).

  • Khi bạn muốn tối ưu: StatelessWidget thường nhẹ hơn vì không cần quản lý State.

Best practice với StatelessWidget

  • Giữ StatelessWidget “pure”: không chứa logic side-effect hoặc thao tác async.

  • Dùng const constructors khi có thể để giúp Flutter tái sử dụng widget (const widgets không rebuild khi parent rebuild).

  • Tách UI thành nhiều StatelessWidget nhỏ thay vì một widget lớn — giúp readability và tái sử dụng.

StatefulWidget và setState(): nguyên lý hoạt động và ví dụ

Nguyên lý cơ bản

StatefulWidget gồm hai phần: lớp widget và lớp State. Ví dụ:

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(onPressed: _increment, child: Text('Add'))
      ],
    );
  }
}

Khi _increment() gọi setState(), Flutter đánh dấu vùng widget do build() tạo ra là “dirty” và tiến hành gọi lại build() để cập nhật UI.

setState() hoạt động thế nào?

setState() nhận một hàm callback nơi bạn thay đổi giá trị của state. Việc gọi setState() kích hoạt quá trình:

  1. Đánh dấu Element tương ứng là cần rebuild.

  2. Flutter lên lịch một frame mới.

  3. Gọi build() trên State đó (và có thể các widget con), cập nhật tree render.

Lưu ý quan trọng khi dùng setState()

  • Chỉ thay đổi state trong callback của setState() hoặc trước khi gọi setState()? Nên thay đổi trong callback để tránh race condition:

    setState(() {
  _count++;
});

  • Tránh gọi setState() quá thường xuyên — ví dụ trong vòng lặp tight loop hoặc mỗi frame — vì sẽ khiến UI lag.

  • Không gọi setState() nếu widget đã disposed; kiểm tra nếu cần trong các callback async:

    if (!mounted) return;
setState(() { ... });

Ví dụ thực tế: Form validation

Một form login đơn giản dùng StatefulWidget để quản lý giá trị input và trạng thái loading:

class LoginForm extends StatefulWidget { ... }
class _LoginFormState extends State<LoginForm> {
  final _emailController = TextEditingController();
  bool _isLoading = false;

  Future<void> _submit() async {
    setState(() => _isLoading = true);
    await api.login(_emailController.text);
    if (!mounted) return;
    setState(() => _isLoading = false);
  }
}

setState() ở đây giúp show spinner khi chờ API và ẩn khi hoàn tất.

Khi nào nên dùng setState() và khi nào nên dùng state management bên ngoài

setState() rất phù hợp cho local UI state — tức là state chỉ liên quan đến một widget hoặc cây con nhỏ. Ví dụ: checkbox, animation controller, textfield content, expand/collapse UI.

Tuy nhiên, khi ứng dụng lớn dần, bạn sẽ cần chia sẻ state giữa nhiều màn hình, lưu offline, hoặc cần side effects phức tạp. Lúc này nên dùng giải pháp quản lý state (state management) như:

  • Provider / ChangeNotifier

  • Riverpod

  • Bloc / Cubit

  • Redux

Quy tắc gợi ý

  1. Local state (chỉ ảnh hưởng trong một widget): dùng setState() trong StatefulWidget.

  2. Shared state (giữa nhiều widget / màn hình): dùng Provider / Riverpod.

  3. Complex business logic (side effects, testable units): cân nhắc Bloc hoặc Redux.

Ví dụ minh họa

  • Một button toggling màu trong một card -> setState() đủ.

  • Danh sách sản phẩm trong ứng dụng thương mại điện tử cần update từ nhiều màn hình -> Provider hoặc Riverpod.

Hiệu năng và tác động của rebuild: làm sao tránh rebuild thừa

Một sai lầm phổ biến là gọi setState() ở widget cha khiến toàn bộ cây con bị rebuild, dù chỉ một phần nhỏ thay đổi. Điều này có thể gây giảm hiệu năng nếu tree lớn.

Kỹ thuật tối ưu

  • Lift state down: lưu state càng thấp càng tốt — nghĩa là đưa state đến widget nhỏ nhất cần nó.

  • Tách widget: tách những phần tĩnh thành StatelessWidget hoặc const widget để tránh bị rebuild.

  • Sử dụng const: khai báo widget const khi nội dung không đổi.

  • Use ValueListenableBuilder / StreamBuilder: cho các state thay đổi nhỏ, tránh rebuild toàn bộ tree.

  • Memoization: tránh tính toán nặng trong build; tính ở trước setState hoặc sử dụng FutureBuilder cho async.

Ví dụ: tránh rebuild

Thay vì:

setState(() {
  _userName = name;
});

ở widget cha chứa cả list nhiều phần tử, bạn có thể chỉ update một widget con bằng cách sử dụng ValueNotifier hoặc di chuyển state xuống widget con.

Vòng đời (lifecycle) của StatefulWidget và những điểm cần chú ý

Hiểu lifecycle giúp bạn biết nơi phù hợp để khởi tạo, hủy tài nguyên, hay gọi API.

Các phương thức thường dùng:

  • initState() — gọi một lần khi State được tạo; dùng để init controller, subscribe streams.

  • didChangeDependencies() — gọi sau initState và khi dependencies thay đổi (ví dụ theme, inherited widget).

  • build() — gọi nhiều lần khi widget cần rebuild.

  • didUpdateWidget() — khi widget cha truyền props mới.

  • dispose() — hủy controller, cancel timer, unsubscribe stream.

Lưu ý bảo mật tài nguyên

Luôn hủy AnimationController, StreamSubscription, TextEditingController trong dispose() để tránh memory leak.

Ví dụ:

@override
void dispose() {
  _controller.dispose();
  _subscription.cancel();
  super.dispose();
}

Mẹo thực tế và anti-patterns liên quan đến setState()

Mẹo thực tế

  • Dùng mounted trước khi gọi setState() sau async:

    if (!mounted) return;
setState(() { ... });

  • Dùng setState() nhỏ gọn — chỉ update giá trị cần thay đổi.

  • Dùng AnimatedBuilder hoặc AnimatedOpacity cho animation thay vì setState() liên tục.

  • Khi debug rebuild, bật debugPrintRebuildDirtyWidgets hoặc sử dụng Flutter DevTools để xem widget rebuild.

Anti-patterns

  • Gọi setState trong build() — điều này gây loop rebuild.

  • Lưu trữ logic phức tạp trong State thay vì tách vào service.

  • Dùng setState cho global state — làm code khó mở rộng và test.

So sánh ngắn: Khi nào chọn StatefulWidget vs StatelessWidget

Trường hợpStatelessWidgetStatefulWidget
UI tĩnh, không tương tác✔️❌
Quản lý local UI state (toggle, counter)❌✔️
Form, input, animation❌✔️
Component tái sử dụng, pure✔️❌
Chia sẻ state qua nhiều màn hình❌❌ (dùng global state)

Tóm lại: StatelessWidget cho đơn giản và hiệu năng; StatefulWidget khi cần phản ứng theo thời gian. setState() là công cụ nhanh và thích hợp cho local state nhưng không phải là giải pháp cho mọi bài toán quản lý trạng thái.

Kết luận

Stateful vs Stateless Widget, setState() là trái tim của thiết kế UI trong Flutter. Khi nắm vững sự khác biệt và nguyên tắc sử dụng setState(), bạn sẽ viết được mã sạch hơn, giao diện phản hồi mượt mà hơn và dễ dàng mở rộng ứng dụng. Dùng StatelessWidget khi UI cố định để tối ưu hiệu năng; dùng StatefulWidget và setState() cho state local, ngắn gọn; khi state cần chia sẻ hoặc có logic phức tạp, hãy chuyển sang Provider, Riverpod hoặc Bloc.

Hãy bắt đầu thực hành: tạo một vài widget ví dụ — bộ đếm, form login, toggle card — và thử thay đổi state bằng setState() rồi thử chuyển logic ra Provider để so sánh. Quan sát rebuild bằng Flutter DevTools để hiểu rõ hơn tác động hiệu năng. Nếu bạn muốn, tôi có thể cung cấp ví dụ project mẫu gồm màn hình demo so sánh setState() vs Provider để bạn thực hành ngay. Chúc bạn học tốt và xây dựng được những ứng dụng Flutter nhanh, ổn định và dễ bảo trì!

Phản hồi từ học viên

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó