Bài 6. StatefulWidget và quản lý trạng thái cục bộ

Khái niệm và lý thuyết

StatefulWidget gồm hai lớp: widget (bất biến, cấu hình) và State (tồn tại lâu, giữ dữ liệu). Khi gọi setState, Flutter đánh dấu widget cần dựng lại và gọi build ở khung hình kế tiếp.

Nguyên tắc: đặt trạng thái ở widget cha thấp nhất cần dùng nó. Dữ liệu đi xuống qua tham số constructor; sự kiện đi lên qua callback. Khi nhiều màn hình cần chung trạng thái, chuyển sang giải pháp quản lý trạng thái (Bài 10).

Bộ đếm

class BoDem extends StatefulWidget {
  const BoDem({super.key});
  @override
  State<BoDem> createState() => _BoDemState();
}
class _BoDemState extends State<BoDem> {
  int _dem = 0;
  @override
  Widget build(BuildContext context) => Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(onPressed: () => setState(() => _dem--), icon: const Icon(Icons.remove)),
      Text('$_dem', style: const TextStyle(fontSize: 24)),
      IconButton(onPressed: () => setState(() => _dem++), icon: const Icon(Icons.add)),
    ],
  );
}

Vòng đời State

Truyền dữ liệu cha – con

class NutYeuThich extends StatelessWidget {
  const NutYeuThich({super.key, required this.daThich, required this.onDoi});
  final bool daThich;
  final ValueChanged<bool> onDoi;
  @override
  Widget build(BuildContext context) => IconButton(
    icon: Icon(daThich ? Icons.favorite : Icons.favorite_border, color: Colors.red),
    onPressed: () => onDoi(!daThich),
  );
}
// Cha: NutYeuThich(daThich: _thich, onDoi: (v) => setState(() => _thich = v))