這篇文章好的的地方在於它不僅講了Flutter Provider如何管理State的，還講述了一個Flutter App可以採用哪一種架構。這種架構是基於clean architecture和FilledStacks這兩種架構原則的（這裡可能理解或者表達有誤，請指正）。但是文中最後採用的還是MVVM的模式。
更加重要的一點，就是本文要講述的Provider其實就是一種widget。搭配著Consumer這個widget一起使用，達到**UI = f(state)**這個state變化，UI跟著變的效果。
最後，還是那句話要看原文的請到這裡，文章本身有質量，而且寫的不難。
正文
Flutter團隊建議初學者使用Provider來管理state。但是Provider到底是什麼，該如何使用？
Provider是一個UI工具。如果你對於架構、state和架構之間有疑惑，那麼並不只有你是這樣。本文會幫助你理清這些概念，讓你知道如何從無到有寫一個app。
本文會帶你學習Provider管理state的方方面面。這裡我們來寫一個計算匯率的app，就叫做MoolaX。在寫這個app的時候你會提升你的Flutter技能：
- app架構
- 實現一個Provider
- 熟練管理app的state
- 根據state的更改來更新UI
注意：本文假設你已經知道Dart和如何寫一個Flutter的app了。如果在這方面還有不清楚的話請移步Flutter入門。
開始
點選“下載材料”來下載專案的程式碼。然後你就可以一步一步的跟著本文新增程式碼完成開發。
本文使用了Android Studio，但是Visual Studio Code也是可以用的。（其實VS Code更好用，譯者觀點）。
在MoolaX裡你可以選擇不同的貨幣。App執行起來是這樣的：
開啟初始專案，解壓後的starter目錄。Android Studio會出現一個彈出框，點選Get dependencies。
在初始專案裡已經包含了一部分程式碼，本教程會帶著你新增必要的程式碼，讓你輕鬆學會下文的內容。
現在這個app執行起來的時候是這樣的：
搭建App的架構
如果你沒聽說過clean architecture，再繼續之前請閱讀這篇文章。
主旨就是把核心業務邏輯從UI、資料庫、網路請求和第三方包中分離出來。為什麼？核心業務邏輯相對並不會那麼頻繁的更改。
UI不應該直接請求網路。也不應該把資料庫讀寫的程式碼寫的到處都是。所有的資料都應該從一個統一的地方發出，這就是業務邏輯。
這就形成了一個外掛系統。即使你更換了一個資料庫，app的其他部分也不會有任何的感知。你可以從一個移動端UI更換的一個桌面UI，app的其他部分也並不用關心。這對於開發一個易於維護、擴充套件的app來說十分有效。
使用Provider管理state
MoolaX的架構就符合這個原則。業務邏輯處理匯率相關的計算。Local Storage、網路請求和Flutter的UI、Provider這些全部都互相獨立。
Local storage使用的是shared preferences，但是這個和app的其他部分沒有關聯。同理網路請求如何獲取資料和app的其他部分也沒有任何關聯。
接下來要理解的是UI、Flutter和Provider都在同一個部分裡。Flutter就是一個UI框架，Provider是這個框架裡的一個widget。
Provider是架構嗎？不是。 Provider是狀態管理嗎？不是，至少在這個app裡不是。
state是app的變數的當前值。這些變數是app的業務邏輯的一部分，分散、管理在不同的model物件裡。所以，業務邏輯管理了state，而不是Provider。
所以，Provider到底是什麼呢？
它是狀態管理的helper，它是一個widget。通過這個widget可以把model物件傳遞給它的子widget。
Consumer widget，屬於Provider 包的一部分，監聽了Provider暴露的mode值的改變，並重新build它的全部子widget。
使用Provider管理state系列對state和provider做了更加全面的解析。Provider有很多種，不過多數不在本文的範圍內。
和業務邏輯通訊
文字的架構模式受到了FilledStacks的啟發。它可以讓架構足夠有條理而又不會太過複雜。對初學者也很友好。
這個模型非常類似於MVVM（Model View ViewModel)。
model就是從資料庫或者網路請求得到的資料。view就是UI，也可以是一個screen或者widget。viewmodel就是在UI和資料中間的業務邏輯，並提供了UI可以展示的資料。但是它對UI並無感知。這一單和MVP不同。viewmodel也不應該知道資料從哪裡來。
在MoolaX裡，每頁都有獨立的view model。資料可以從網路和本地儲存獲得。處理這部分內容的類叫做services。MoolaX的架構基本是這樣的：
注意如下幾點：
- UI頁面監聽view model的改變，也會給view model傳送事件
- view model不會感知到UI的具體細節
- 業務邏輯與貨幣抽象互動。它不會感知資料是從網路請求得來還是從本地儲存得來。
理論部分到此結束，現在開始程式碼部分！
建立核心業務邏輯
專案的目錄結構如下：
Models
我們來看看mdels目錄：
這些就是業務邏輯要用到的資料結構了。類職責協同卡片模型是一個很好的方法可以確定哪些model是需要的。卡片如下：
最後會用到Currency和Rate兩個model。他們代表了先進和匯率，就算你沒喲計算機也需要這兩個。
View Model
view mode的職責就是拿到資料，然後轉化成UI可用的格式。
展開view_models目錄。你會看到兩個view model，一個是給結算頁用的，一個是給選擇匯率頁用的。
開啟choose_favorites_viewmodel.dart。你會看到下面的程式碼：
// 1
import 'package:flutter/foundation.dart';
// 2
class ChooseFavoritesViewModel extends ChangeNotifier {
// 3
final CurrencyService _currencyService = serviceLocator<CurrencyService>();
List<FavoritePresentation> _choices = [];
List<Currency> _favorites = [];
// 4
List<FavoritePresentation> get choices => _choices;
void loadData() async {
// ...
// 5
notifyListeners();
}
void toggleFavoriteStatus(int choiceIndex) {
// ...
// 5
notifyListeners();
}
}
複製程式碼解釋：
- 使用
ChangeNotifier來實現UI對view model的監聽。這個類在Flutterfoundation包。 - view model類繼承了
ChangeNotifier類。另一個選項是使用mixin。ChangeNotifier裡有一個notifyListeners()方法，你後面會用到。 - 一個service來負責獲取和儲存貨幣以及匯率資料。
CurrencyService是一個抽象類，它的具體實現隱藏在view model之外。你可以任意更換不同的實現。 - 任意可以訪問這個view mode的例項都可以訪問到一個貨幣列表，然後從裡面選出一個最喜歡的。UI會使用這個列表來建立一個可選的listview。
- 在獲取到貨幣列表或者修改了最喜歡的貨幣之後，都會呼叫
notifyListeners()方法發出通知。UI會接受到通知，並作出更新。
在choose_favorites_viewmodel.dart檔案還有另外的一個類：FavoritePresentation:
class FavoritePresentation {
final String flag;
final String alphabeticCode;
final String longName;
bool isFavorite;
FavoritePresentation(
{this.flag, this.alphabeticCode, this.longName, this.isFavorite,});
}
複製程式碼這個類就是為UI展示用的。這裡儘量不儲存任何與UI無關的內容。
在ChooseFavoritesViewModel，用下面的程式碼替換掉loadData()方法
void loadData() async {
final rates = await _currencyService.getAllExchangeRates();
_favorites = await _currencyService.getFavoriteCurrencies();
_prepareChoicePresentation(rates);
notifyListeners();
}
void _prepareChoicePresentation(List<Rate> rates) {
List<FavoritePresentation> list = [];
for (Rate rate in rates) {
String code = rate.quoteCurrency;
bool isFavorite = _getFavoriteStatus(code);
list.add(FavoritePresentation(
flag: IsoData.flagOf(code),
alphabeticCode: code,
longName: IsoData.longNameOf(code),
isFavorite: isFavorite,
));
}
_choices = list;
}
bool _getFavoriteStatus(String code) {
for (Currency currency in _favorites) {
if (code == currency.isoCode)
return true;
}
return false;
}
複製程式碼loadData獲取一列匯率。接著，_prepareChoicePresentation()方法把列表轉化成UI可以直接顯示的格式。_getFavoriteStatus()決定了一個貨幣是否為最喜歡貨幣。
接著使用下面的程式碼替換掉toggleFavoriteStatus()方法：
void toggleFavoriteStatus(int choiceIndex) {
final isFavorite = !_choices[choiceIndex].isFavorite;
final code = _choices[choiceIndex].alphabeticCode;
_choices[choiceIndex].isFavorite = isFavorite;
if (isFavorite) {
_addToFavorites(code);
} else {
_removeFromFavorites(code);
}
notifyListeners();
}
void _addToFavorites(String alphabeticCode) {
_favorites.add(Currency(alphabeticCode));
_currencyService.saveFavoriteCurrencies(_favorites);
}
void _removeFromFavorites(String alphabeticCode) {
for (final currency in _favorites) {
if (currency.isoCode == alphabeticCode) {
_favorites.remove(currency);
break;
}
}
_currencyService.saveFavoriteCurrencies(_favorites);
}
複製程式碼只要這個方法被呼叫，view model就會呼叫貨幣服務儲存新的最喜歡貨幣。同時因為notifyListeners方法也被呼叫了，所以UI也會立刻顯示最新的修改。
恭喜你，你已經完成了view model了。
總結一下，你的view model類需要做的就是繼承ChangeNotifier類並在需要更新UI的地方呼叫notifyListeners()方法。
Services
我們這裡有三種service，分別是：匯率交換，儲存以及網路請求。看下面的架構圖，所有服務都在右邊紅色的框表示：
- 建立一個抽象類，在裡面新增所有會用到的方法
- 給抽象類寫一個具體的實現類
因為每次建立一個service的方式都差不多，我們就用網路請求為例。初始專案中已經包含了匯率服務和儲存服務了。
建立一個抽象service類
開啟web_api.dart：
你會看到如下的程式碼：
import 'package:moolax/business_logic/models/rate.dart';
abstract class WebApi {
Future<List<Rate>> fetchExchangeRates();
}
複製程式碼這是一個抽象類，所以它並不具體做什麼。然而，它還是會反映出app需要它做什麼：它應該從網路請求一串匯率回來。具體如何實現由你決定。
使用假資料
在web_api裡，新建一個檔案web_api_fake.dart。之後複製如下程式碼進去：
import 'package:moolax/business_logic/models/rate.dart';
import 'web_api.dart';
class FakeWebApi implements WebApi {
@override
Future<List<Rate>> fetchExchangeRates() async {
List<Rate> list = [];
list.add(Rate(
baseCurrency: 'USD',
quoteCurrency: 'EUR',
exchangeRate: 0.91,
));
list.add(Rate(
baseCurrency: 'USD',
quoteCurrency: 'CNY',
exchangeRate: 7.05,
));
list.add(Rate(
baseCurrency: 'USD',
quoteCurrency: 'MNT',
exchangeRate: 2668.37,
));
return list;
}
}
複製程式碼這個類實現了抽象WebApi類，反回了某些寫死的資料。現在你可以繼續編寫其他部分的程式碼了，網路請求的部分可以放心了。什麼時候準備好了，可以回來實現真正的網路請求。
新增一個Service定位器
即使抽象類都實現了，你還是要告訴app去哪裡找這些抽象類的具體實現類。
有一個service定位器可以很快完成這個功能。一個service定位器是一個依賴注入的替代。它可以用來把一個service和app的其他部分解耦。
在ChooseFavoriatesViewModel裡有這麼一行：
final CurrencyService _currencyService = serviceLocator<CurrencyService>();
複製程式碼serviceLocator是一個單例物件，它回到你用到的所有的service。
在services目錄下，開啟service_locator.dart。你會看到下面的程式碼：
// 1
GetIt serviceLocator = GetIt.instance;
// 2
void setupServiceLocator() {
// 3
serviceLocator.registerLazySingleton<StorageService>(() => StorageServiceImpl());
serviceLocator.registerLazySingleton<CurrencyService>(() => CurrencyServiceFake());
// 4
serviceLocator.registerFactory<CalculateScreenViewModel>(() => CalculateScreenViewModel());
serviceLocator.registerFactory<ChooseFavoritesViewModel>(() => ChooseFavoritesViewModel());
}
複製程式碼解釋：
GetIt是一個叫做get_it的service 定位包。這裡已經預先新增到pubspec.yaml裡了。get_it會通過一個全域性的單例來保留所有註冊的物件。- 這個方法就是用來註冊服務的。在構建UI之前就需要呼叫這個方法了。
- 你可以把你的服務註冊為延遲載入的單例。註冊為單例也就是說你每次取回的是同一個例項。註冊為一個延遲載入的單例等於，在第一次使用的時候，只有在用的時候才會初始化。
- 你也可以使用service定位器來註冊view model。這樣在UI裡可以很容易拿到他們的引用。當然view models都是註冊為一個factory了。每次取回來的都是一個新的view model例項。
注意程式碼是在哪裡呼叫setupServiceLocator()的。開啟main.dart檔案：
void main() {
setupServiceLocator(); // <--- here
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Moola X',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: CalculateCurrencyScreen(),
);
}
}
複製程式碼註冊FakeWebApi
現在來註冊FakeWebApi。
serviceLocator.registerLazySingleton<WebApi>(() => FakeWebApi());
複製程式碼使用CurrencyServiceImpl替換CurrencyServiceFake：
serviceLocator.registerLazySingleton<CurrencyService>(() => CurrencyServiceImpl());
複製程式碼初始專案裡使用了CurrencyServiceFake，這樣才能執行起來。
引入缺失的類：
import 'web_api/web_api.dart';
import 'web_api/web_api_fake.dart';
import 'currency/currency_service_implementation.dart';
複製程式碼執行app，點選右上角的心形。
Web API的具體實現
前面註冊了假的web api實現，app已經可以執行了。下面就需要從真的web伺服器上獲取真正的資料了。在services/web_api目錄下，新建檔案web_api_implementation.dart。新增如下的程式碼：
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:moolax/business_logic/models/rate.dart';
import 'web_api.dart';
// 1
class WebApiImpl implements WebApi {
final _host = 'api.exchangeratesapi.io';
final _path = 'latest';
final Map<String, String> _headers = {'Accept': 'application/json'};
// 2
List<Rate> _rateCache;
Future<List<Rate>> fetchExchangeRates() async {
if (_rateCache == null) {
print('getting rates from the web');
final uri = Uri.https(_host, _path);
final results = await http.get(uri, headers: _headers);
final jsonObject = json.decode(results.body);
_rateCache = _createRateListFromRawMap(jsonObject);
} else {
print('getting rates from cache');
}
return _rateCache;
}
List<Rate> _createRateListFromRawMap(Map jsonObject) {
final Map rates = jsonObject['rates'];
final String base = jsonObject['base'];
List<Rate> list = [];
list.add(Rate(baseCurrency: base, quoteCurrency: base, exchangeRate: 1.0));
for (var rate in rates.entries) {
list.add(Rate(baseCurrency: base,
quoteCurrency: rate.key,
exchangeRate: rate.value as double));
}
return list;
}
}，
複製程式碼注意下面的幾點：
- 如同
FakeWebApi，這個類也實現了WebApi。它包含了從api.exchangeratesapi.io獲取資料的邏輯。然而，app的其他部分並不知道這一點，所以如果你想換到別的web api，毫無疑問這裡就是你唯一可以更改的地方。 - exchangeratesapi.io慷慨的提供了給定資料的貨幣的匯率，都不要額外的token。
開啟service_localtor.dart，把FakeWebApi()修改為WebApiImp()，並更新對應的import語句。
import 'web_api/web_api_implementation.dart';
void setupServiceLocator() {
serviceLocator.registerLazySingleton<WebApi>(() => WebApiImpl());
// ...
}
複製程式碼實現Provider
現在總算輪到Provider了。這篇怎麼說也是一個Provider的教程!
我們等了這麼久才開始Provider的部分，你應該意識到了Provider其實是一個app的很小一部分。它只是用來方便在更改發生的時候方便把值傳遞給子widget，但也不是架構或者狀態管理的系統。
在pubspec.yaml裡找到Provider包：
dependencies:
provider: ^4.0.1
複製程式碼有一個比較特殊的Provider：ChangeNotifierProvider。它監聽實現了ChangeNotifier的view model的修改。
在ui/views目錄下，開啟choose_favorites.dart檔案。這個檔案的內容替換為如下的程式碼：
import 'package:flutter/material.dart';
import 'package:moolax/business_logic/view_models/choose_favorites_viewmodel.dart';
import 'package:moolax/services/service_locator.dart';
import 'package:provider/provider.dart';
class ChooseFavoriteCurrencyScreen extends StatefulWidget {
@override
_ChooseFavoriteCurrencyScreenState createState() =>
_ChooseFavoriteCurrencyScreenState();
}
class _ChooseFavoriteCurrencyScreenState
extends State<ChooseFavoriteCurrencyScreen> {
// 1
ChooseFavoritesViewModel model = serviceLocator<ChooseFavoritesViewModel>();
// 2
@override
void initState() {
model.loadData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Choose Currencies'),
),
body: buildListView(model),
);
}
// Add buildListView() here.
}
複製程式碼你會發現buildListView()方法，注意如下的更改：
- servie定位器返回一個view model的例項
- 使用
StatefulWidget,它包含了initState()方法。這裡你可以告訴view model載入貨幣資料。
在build()方法下，新增如下的buildListView()實現：
Widget buildListView(ChooseFavoritesViewModel viewModel) {
// 1
return ChangeNotifierProvider<ChooseFavoritesViewModel>(
// 2
create: (context) => viewModel,
// 3
child: Consumer<ChooseFavoritesViewModel>(
builder: (context, model, child) => ListView.builder(
itemCount: model.choices.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: SizedBox(
width: 60,
child: Text(
'${model.choices[index].flag}',
style: TextStyle(fontSize: 30),
),
),
// 4
title: Text('${model.choices[index].alphabeticCode}'),
subtitle: Text('${model.choices[index].longName}'),
trailing: (model.choices[index].isFavorite)
? Icon(Icons.favorite, color: Colors.red)
: Icon(Icons.favorite_border),
onTap: () {
// 5
model.toggleFavoriteStatus(index);
},
),
);
},
),
),
);
}
複製程式碼程式碼解析：
- 新增
ChangeNotifierProvider，一個特殊型別的provider，它監聽了來自view model的修改。 ChangeNotifierProvider有一個create方法。這個方法給子wdiget提供了view model值。在這裡你已經有了view model的引用，那就直接使用。Consumer，當view model的notifyListeners()告知更改發生的時候重新build介面。Consumer的builder方法向下傳遞了view model值。這個view model是從ChangeNotifierProvider傳下來的。- 使用
model裡的資料來重新build介面。注意UI裡只有很少的邏輯。 - 既然你有了view model的引用，那麼完全可以呼叫裡面的方法。
toggleFavoriteStatus()呼叫了notifyListeners()。
再次執行app。
在大型app中使用Provider
你可以按照本文所述的方式新增更多的介面。一旦你習慣了為每個介面新增view model就可以考慮為某些類建立基類來減少重複程式碼。本文沒有這麼做，因為這樣的話理解這些程式碼要花更多的時間。
其他的架構和狀態管理方法
如果你不喜歡本文所述的架構，可以考慮BLoC模式。BLoC模式入門也是一個很好的起點。你會發現BLoC模式也不像傳說的那麼難以理解。
還有其他的，不過Provider和BLoC是目前最普遍採用的。