Quản lý Trạng thái trong Flutter – Hiểu và làm chủ State

👋 Lời mở đầu

Tiếp tục hành trình chinh phục Flutter từ con số 0, mỗi ngày mình đều dành thời gian ghi chép lại những gì đã học được – vừa để ôn luyện, vừa như một cuốn nhật ký nhỏ đồng hành cùng quá trình học tập này.

Trong bài viết hôm nay, chúng ta sẽ tìm hiểu về một trong những khái niệm cực kỳ quan trọng khi làm app bằng Flutter: State và cách quản lý trạng thái.

Bài viết này là quá trình mình tự học nên nếu có gì chưa đúng hoặc còn thiếu sót, mong mọi người góp ý giúp mình hoàn thiện hơn nha 🙏

🔍 1. State là gì trong Flutter?

Khi một ứng dụng cần thay đổi nội dung hiển thị (ví dụ: người dùng thao tác thay đổi, nhập văn bản, đổi màu…), Flutter cần biết thông tin nào thay đổi – đó chính là State.

Nói đơn giản, state là dữ liệu đại diện cho tình trạng hiện tại của một widget. Khi state thay đổi, giao diện sẽ tự động được cập nhật lại.

📦 2. Quản lý trạng thái như thế nào?

Flutter cung cấp nhiều cách để quản lý state. Dưới đây là một số phương pháp phổ biến:

🧱 2.1. Quản lý state cục bộ (Local State)

Dùng trực tiếp trong StatefulWidget bằng setState():

class CounterPage extends StatefulWidget { @override _CounterPageState createState() => _CounterPageState();
} class _CounterPageState extends State<CounterPage> { int count = 0; void _increment() { setState(() { count++; }); } @override Widget build(BuildContext context) { return Column( children: [ Text('Giá trị: $count'), ElevatedButton( onPressed: _increment, child: Text('Tăng'), ), ], ); }
}

📌 Lưu ý: setState() chỉ nên dùng cho widget đơn giản hoặc không cần chia sẻ dữ liệu sang nơi khác.

🌍 2.2. Quản lý state toàn cục (Global State)

Khi nhiều widget cần chia sẻ chung một dữ liệu, ta nên dùng giải pháp như:

• Provider (dễ tiếp cận)
• Riverpod (phiên bản nâng cấp, an toàn hơn)
• Bloc (phù hợp cho dự án phức tạp)
• GetX, MobX, Redux...

Trong phạm vi bài hôm nay, mình chưa đi sâu vào thư viện mà sẽ chỉ dùng setState() để làm quen.

🛠 3. Sử dụng state trong App đếm số đơn giản

Chúng ta sẽ tạo một app nhỏ: nhấn nút để tăng số lần đếm.

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Đếm số', home: CounterPage(), ); }
} class CounterPage extends StatefulWidget { @override _CounterPageState createState() => _CounterPageState();
} class _CounterPageState extends State<CounterPage> { int _count = 0; void _increase() { setState(() { _count++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('App đếm số')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Bạn đã nhấn nút:'), SizedBox(height: 10), Text('$_count lần', style: TextStyle(fontSize: 24)), SizedBox(height: 20), ElevatedButton( onPressed: _increase, child: Text('Tăng lên'), ), ], ), ), ); }
}

💡 4. Lưu ý khi dùng State

• Tránh dùng setState() quá nhiều hoặc ở nơi không cần thiết.
• Khi app phức tạp, nên học các thư viện như Provider, Riverpod, BLoC.
• Tách các widget riêng biệt để tránh build lại toàn bộ.

👋 Lời kết

Qua bài học ngày hôm nay, mình thấy việc quản lý state là phần không thể thiếu nếu muốn app hoạt động đúng ý. Flutter cung cấp nhiều cách để làm việc này, bắt đầu từ setState() cho đến các thư viện mạnh mẽ hơn như Provider.

Ngày mai mình sẽ tiếp tục tìm hiểu một số thành phần thú vị hơn như navigation (chuyển màn hình), routes và các tương tác giữa màn hình với nhau!

Hẹn gặp lại ở bài viết tiếp theo nha 😄