Flutter狀態管理套件-Provider

前言

今天介紹的是 Flutter 的 Provider是一個狀態管理的套件，畢竟無論是 Web 還是 App 勢必都要有一個狀態管理套件，其好處在於可以分割邏輯和 UI 介面方便日後維護升級，且資料可以達到共享的作用。

優缺點

Flutter 除了 Provider 外還有許多的狀態管理套件，像是 BLoc、Redux、GetX 等等，在眾多的套件內我為何會使用 Provider?

因為 Provider 有以下優點:

1. 使用簡單不需要過多代碼，基本上只需使用 watch、read 來監聽 State 即可。
2. 是基於InheritedWidget上進行封裝的，穩定且不會影響效能。
3. 這是官方推薦的狀態管理套件，且也由官方進行開發和維護。

至於缺點我認為只有一個:

1. 依賴於 context，因為 context 基本上都在 widget 內才能獲取，所以沒辦法隨時隨地的去做存取。

安裝

console
1flutter pub add provider

創建 State 並初始化

首先創建一個 testState.dart (在你的專案內這裡會是接收後端資料的地方)

dart
1class TestState with ChangeNotifier, DiagnosticableTreeMixin {
2  int _count = 0;
3  int get count => _count;
4
5  void addCount() {
6    _count += 1;
7    notifyListeners();
8  }
9}

並在 main.dart 初始化

dart
1main() {
2  runApp(
3    MultiProvider(
4      providers: [
5        ChangeNotifierProvider(create: (_) => TestState()),
6      ],
7      child: const MyApp(),
8    ),
9  );
10}

使用 State

使用 read 來呼叫剛剛創建的 addCount() 來對 count 做+1

dart
1 context.read<TestState>().addCount();

使用 watch 監聽 count，因為剛剛有使用 _notifyListeners()，所以當 count 變化時畫面上會直接跟著變化

dart
1context.watch<TestState>().count;

最後

以上就是 Provider 的介紹，依照我個人的理解並用最簡單的方式來表達，相信對於剛開始接觸 Flutter 的朋友會有所幫助，我們下次見~