Flutter Provider #

一、Provider基础 #

1.1 安装 #

yaml
dependencies:
  provider: ^6.1.1

1.2 基本用法 #

dart
class Counter extends ChangeNotifier {
  int _count = 0;
  
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MyApp(),
    ),
  );
}

二、Provider类型 #

2.1 Provider #

dart
Provider<String>(
  create: (_) => 'Hello',
  child: Text(context.read<String>()),
)

2.2 ChangeNotifierProvider #

dart
ChangeNotifierProvider(
  create: (_) => Counter(),
  child: MyApp(),
)

2.3 MultiProvider #

dart
MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Counter()),
    ChangeNotifierProvider(create: (_) => User()),
  ],
  child: MyApp(),
)

三、读取数据 #

3.1 context.watch #

dart
Text('${context.watch<Counter>().count}')

3.2 context.read #

dart
ElevatedButton(
  onPressed: () => context.read<Counter>().increment(),
  child: Text('Add'),
)

3.3 Consumer #

dart
Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('${counter.count}');
  },
)

3.4 Selector #

dart
Selector<Counter, int>(
  selector: (_, counter) => counter.count,
  builder: (context, count, child) {
    return Text('$count');
  },
)

四、总结 #

4.1 核心概念 #

概念 说明
ChangeNotifier 状态类
ChangeNotifierProvider 提供状态
context.watch 监听变化
context.read 获取实例
Consumer 局部重建

4.2 下一步 #

让我们学习 Riverpod

最后更新:2026-03-28