Flutter 状态管理入门速记

目标

用最小心智负担理解 setState、Provider、Riverpod 的区别

1. 从 setState 开始

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('count: $count')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

适合：

页面内部的小状态
生命周期和页面强绑定

2. Provider（中小项目够用）

class CounterModel extends ChangeNotifier {
  int count = 0;

  void inc() {
    count++;
    notifyListeners();
  }
}

ChangeNotifierProvider(
  create: (_) => CounterModel(),
  child: const App(),
)

1
2
3

Consumer<CounterModel>(
  builder: (_, model, __) => Text('count: ${model.count}'),
)

适合：

有跨组件共享状态需求
团队成员都熟悉 ChangeNotifier 风格

3. Riverpod（可测试性更好）

1	final counterProvider = StateProvider<int>((ref) => 0);

class CounterText extends ConsumerWidget {
  const CounterText({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('count: $count');
  }
}