---

技術選型決策樹

示例對比表：

框架	學習曲線	樣板代碼	類型安全	測試友好	適用規模
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則是快速驗證創意的利器——明智的選擇比盲目的努力更重要”