Flutter各大主流状态管理框架技术选型分析及具体使用步骤

---

技术选型决策树

示例对比表：

框架	学习曲线	样板代码	类型安全	测试友好	适用规模
Provider	低	少	中	中	小-中
Riverpod	中	中	高	高	所有规模
Bloc	高	多	高	高	中-大
GetX	低	极少	低	中	小
MobX	中	少	高	高	中-大
ValueNotifier	低	极少	中	中	局部状态

1. Provider（官方基础方案）

使用步骤：

详细步骤：

1. 添加依赖

dependencies:flutter:sdk: flutterprovider: ^6.0.5

2. 创建状态模型

class CounterModel with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners(); // 通知监听器}
}

3. 在顶层包裹Provider

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

4. 在UI中使用状态

class CounterScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {final counter = context.watch<CounterModel>();return Scaffold(body: Text('Count: ${counter.count}'),floatingActionButton: FloatingActionButton(onPressed: () => counter.increment(),child: Icon(Icons.add),),);}
}

---

2. Riverpod（现代推荐方案）

使用步骤：

详细步骤：

1. 添加依赖

dependencies:flutter_riverpod: ^2.4.9riverpod_annotation: ^2.3.0
dev_dependencies:build_runner: ^2.4.8riverpod_generator: ^2.3.3

2. 创建Provider

// counter_provider.dart
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'counter_provider.g.dart';@riverpod
class Counter extends _$Counter {@overrideint build() => 0; // 初始状态void increment() => state++;
}

3. 生成代码

flutter pub run build_runner watch

4. 设置ProviderScope

void main() {runApp(ProviderScope(child: MyApp(),),);
}

5. 在UI中使用

class CounterScreen extends ConsumerWidget {@overrideWidget build(BuildContext context, WidgetRef ref) {final count = ref.watch(counterProvider);return Scaffold(body: Text('Count: $count'),floatingActionButton: FloatingActionButton(onPressed: () => ref.read(counterProvider.notifier).increment(),child: Icon(Icons.add),);}
}

---

3. Bloc（企业级方案）

使用步骤：

详细步骤：

1. 添加依赖

dependencies:flutter_bloc: ^8.1.3bloc: ^8.1.0

2. 定义事件和状态

// 事件
abstract class CounterEvent {}
class Increment extends CounterEvent {}// 状态
class CounterState {final int count;CounterState(this.count);
}

3. 创建Bloc

class CounterBloc extends Bloc<CounterEvent, CounterState> {CounterBloc() : super(CounterState(0)) {on<Increment>((event, emit) {emit(CounterState(state.count + 1));});}
}

4. 在顶层提供Bloc

void main() {runApp(BlocProvider(create: (context) => CounterBloc(),child: MyApp(),),);
}

5. UI中使用

class CounterScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: BlocBuilder<CounterBloc, CounterState>(builder: (context, state) {return Text('Count: ${state.count}');},),floatingActionButton: FloatingActionButton(onPressed: () => context.read<CounterBloc>().add(Increment()),child: Icon(Icons.add),),);}
}

---

4. GetX（全栈式方案）

使用步骤：

详细步骤：

1. 添加依赖

dependencies:get: ^4.6.5

2. 创建控制器

class CounterController extends GetxController {var count = 0.obs; // 响应式变量void increment() => count++;
}

3. 配置GetMaterialApp

void main() {runApp(GetMaterialApp( // 替换MaterialApphome: CounterScreen(),),);
}

4. UI中使用

class CounterScreen extends StatelessWidget {final CounterController c = Get.put(CounterController());@overrideWidget build(BuildContext context) {return Scaffold(body: Obx(() => Text('Count: ${c.count}')),floatingActionButton: FloatingActionButton(onPressed: () => c.increment(),child: Icon(Icons.add),),);}
}

5. 路由导航（无需context）

// 任何地方调用
Get.to(NextScreen());
Get.back();

---

5. Redux（单向数据流方案）

使用步骤：

详细步骤：

1. 添加依赖

dependencies:flutter_redux: ^0.11.0redux: ^5.0.0

2. 定义状态和操作

// 状态
class AppState {final int counter;AppState(this.counter);
}// 操作
class IncrementAction {}

3. 创建Reducer

AppState reducer(AppState state, dynamic action) {if (action is IncrementAction) {return AppState(state.counter + 1);}return state;
}

4. 创建Store

void main() {final store = Store<AppState>(reducer,initialState: AppState(0),);runApp(StoreProvider(store: store,child: MyApp(),),);
}

5. UI中使用

class CounterScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return StoreConnector<AppState, int>(converter: (store) => store.state.counter,builder: (context, count) {return Scaffold(body: Text('Count: $count'),floatingActionButton: FloatingActionButton(onPressed: () => StoreProvider.of<AppState>(context).dispatch(IncrementAction()),child: Icon(Icons.add),),);},);}
}

---

6. MobX（响应式方案）

使用步骤：

graph TDC[创建Store] --> O[用Observer包裹UI]O --> R[更新@observable变量]

详细步骤：

1. 添加依赖

dependencies:flutter_mobx: ^2.0.6mobx: ^2.1.3build_runner: ^2.4.8
dev_dependencies:mobx_codegen: ^2.0.7

2. 创建Store

import 'package:mobx/mobx.dart';part 'counter_store.g.dart';class CounterStore = _CounterStore with _$CounterStore;abstract class _CounterStore with Store {@observableint count = 0;@actionvoid increment() {count++;}
}

3. 生成代码

flutter pub run build_runner build

4. 在顶层提供Store

void main() {final counterStore = CounterStore();runApp(Provider(create: (context) => counterStore,child: MyApp(),),);
}

5. UI中使用

class CounterScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {final counterStore = Provider.of<CounterStore>(context);return Scaffold(body: Observer(builder: (_) => Text('Count: ${counterStore.count}'),),floatingActionButton: FloatingActionButton(onPressed: () => counterStore.increment(),child: Icon(Icons.add),),);}
}

---

7. ValueNotifier（轻量级方案）

使用步骤：

详细步骤：

1. 创建ValueNotifier

final counterNotifier = ValueNotifier<int>(0);

2. UI中使用

class CounterScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: ValueListenableBuilder<int>(valueListenable: counterNotifier,builder: (context, value, _) {return Text('Count: $value');},),floatingActionButton: FloatingActionButton(onPressed: () => counterNotifier.value++,child: Icon(Icons.add),),);}
}

3. 清理资源（在StatefulWidget中）

@override
void dispose() {counterNotifier.dispose();super.dispose();
}

---

金句建议：
“状态管理是Flutter开发的灵魂抉择，Riverpod和Bloc代表着工程化的未来，
而GetX则是快速验证创意的利器——明智的选择比盲目的努力更重要”