Flutter狀態(tài)管理之Riverpod

River Deer

最近一兩個(gè)月在一些Flutter的話題中不斷的見(jiàn)到了Riverpod這個(gè)關(guān)鍵詞，細(xì)看后發(fā)現(xiàn)它是Flutter狀態(tài)管理的一個(gè)新方式。

Flutter的狀態(tài)管理方式有很多，Redux、 Bloc、 MobX、Provider等等。單單一個(gè)Provider，我也見(jiàn)到了各種組合，例如ChangeNotifier + Provider / StateNotifier + Provider（ + freezed）。各種方式各有千秋，我們根據(jù)自己的習(xí)慣和項(xiàng)目的情況去選擇就好，這里不做討論。本篇只是來(lái)介紹一下Riverpod，給大家提供一個(gè)新的選擇。

1.介紹

Riverpod logo

Riverpod和Provider師出同門(mén)，都來(lái)自作者Remi，Riverpod可以被認(rèn)為是Provider的重寫(xiě)，來(lái)實(shí)現(xiàn)原本不可能的功能。就像它的名字一樣，字母與provider相同，但是又不相同。

你可以理解Riverpod是Provider的升級(jí)版，解決了Provider的一些痛點(diǎn)：

  • Provider是InheritedWidget的封裝，所以在讀取狀態(tài)時(shí)需要BuildContext。這導(dǎo)致了許多的限制，許多新手在不理解InheritedWidget和BuildContext時(shí)，跨頁(yè)面獲取狀態(tài)經(jīng)常會(huì)ProviderNotFoundException。而Riverpod不再依賴Flutter，也就是沒(méi)有使用InheritedWidget，所以也不需要BuildContext。

  • 讀取對(duì)象是編譯安全的。沒(méi)有那么多的運(yùn)行時(shí)異常。

  • 能夠有多個(gè)相同類(lèi)型的provider。

  • provider可以是私有的。

  • 當(dāng)不再使用provider的狀態(tài)時(shí)，將其自動(dòng)回收。

當(dāng)然目前Riverpod也有一些不足（0.14.1版本）：

  • 畢竟誕生不久，它還不能保證是完全穩(wěn)定的。
  • 可能后期會(huì)有API的破壞性改動(dòng)。（比如在0.7.0就有不少Breaking，導(dǎo)致我之前寫(xiě)的部分示例內(nèi)容就報(bào)錯(cuò)了。）
  • 目前生產(chǎn)環(huán)境中使用需要謹(jǐn)慎。

2.如何選擇

作者提供了Riverpod的三種方式，怎樣選擇如下圖：

如何選擇Riverpod

本篇不引入flutter_hooks相關(guān)內(nèi)容，這里我就選擇flutter_riverpod 。那么將它添加到pubspec.yaml中：

flutter_riverpod: ^0.14.1

然后執(zhí)行flutter pub get。

3.基礎(chǔ)使用

Provider

這里使用Riverpod的Provider需要三步就可以。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1.創(chuàng)建一個(gè)全局的provider，里面儲(chǔ)存“Hello World!”
final Provider<String> helloWorldProvider = Provider((_) => 'Hello World!');

void main() {
  runApp(
    // 2.添加“ProviderScope”。所有使用Riverpod的Flutter程序都必須
    // 在widget tree的根部添加它，用來(lái)儲(chǔ)存各個(gè)provider。
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Riverpod Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ProviderExample(),
    );
  }
}

// 3.使用“ConsumerWidget”，在“build”中獲取對(duì)應(yīng)的provider
class ProviderExample extends ConsumerWidget {

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final String value = watch(helloWorldProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Provider Example')),
      body: Center(
        child: Text(value),
      ),
    );
  }
}

這里儲(chǔ)存“Hello World!” 使用的是Provider，它提供一個(gè)永遠(yuǎn)不變的對(duì)象。不過(guò)大部分場(chǎng)景下?tīng)顟B(tài)都是可變的，下面用計(jì)數(shù)器來(lái)舉例。

StateProvider

在“Hello World”的基礎(chǔ)上，做兩點(diǎn)修改即可。

  1. 定義一個(gè)全局常量StateProvider。

    final StateProvider<int> counterProvider = StateProvider((_) => 0);

  2. import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class StateProviderExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StateProvider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer(
              builder: (context, watch, _) {
                /// 使用Consumer(ConsumerWidget的封裝)，控制刷新的范圍。
                int count = watch(counterProvider).state;
                return Text(
                  '$count',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        /// 使用read獲取counterProvider，操作state。
        onPressed: () => context.read(counterProvider).state++,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

}

如果你的狀態(tài)比較復(fù)雜可以使用ChangeNotifierProvider，如果習(xí)慣使用StateNotifier，可以使用StateNotifierProvider 。其實(shí)StateProvider的內(nèi)部是StateController，也還是StateNotifier。源碼如下；

class StateProvider<T>
    extends AlwaysAliveProviderBase<StateController<T>, StateController<T>> {
  
  StateProvider(
    Create<T, ProviderReference> create, {
    String name,
  }) : super((ref) => StateController(create(ref)), name);
 ...
}

class StateController<T> extends StateNotifier<T> {
  StateController(T state) : super(state);

  @override
  T get state => super.state;

  @override
  set state(T value) => super.state = value;
}

StateNotifierProvider的用法與StateProvider基本一致，這里就不貼出來(lái)了，有興趣的可以點(diǎn)擊這里查看。

2021-04-19更新：

0.14.0對(duì)StateNotifierProvider的語(yǔ)法有破壞性變化，避免了StateNotifierProvider的錯(cuò)誤使用。具體見(jiàn)文檔。

ChangeNotifierProvider

這部分沒(méi)啥說(shuō)的，注意ChangeNotifier與StateNotifier的區(qū)別，需要自己調(diào)用notifyListeners通知變更。

final ChangeNotifierProvider<Counter> _counterProvider = ChangeNotifierProvider((_) => Counter());

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
  void decrement(){
    _count--;
    notifyListeners();
  }
}

class ChangeProviderNotifierExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChangeNotifierProvider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer(
              builder: (context, watch, _) {
                int count = watch(_counterProvider).count;
                return Text(
                  '$count',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        /// 使用read獲取counterProvider。
        onPressed: () => context.read(_counterProvider).increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

FutureProvider

final FutureProvider<String> futureProvider = FutureProvider((_) async {
  /// 延時(shí)3s
  await Future.delayed(const Duration(seconds: 3));
  return 'Riverpod';
});

class FutureProviderExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureProvider Example'),
      ),
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            AsyncValue<String> futureProviderValue = watch(futureProvider);
            /// 根據(jù)相應(yīng)狀態(tài)展示
            return futureProviderValue.when(
              loading: () => CircularProgressIndicator(),
              error: (error, stack) => Text('Oops, something unexpected happened'),
              data: (value) => Text(
                'Hello $value',
                style: Theme.of(context).textTheme.headline4,
              ),
            );
          },
        ),
      ),
    );
  }
}

作者也提供了StreamProvider。用法大同小異，有興趣的可以查看我的示例代碼。

ProviderListener

如果你希望在Widget Tree上監(jiān)聽(tīng)provider的狀態(tài)變化，可以使用ProviderListener。用上面的計(jì)數(shù)器例子，當(dāng)計(jì)數(shù)器為5時(shí)，觸發(fā)監(jiān)聽(tīng)。

ProviderListener<StateController<int>>(
  provider: counterProvider,
  onChange: (_, counter) {
    if (counter.state == 5) {
      print('當(dāng)前計(jì)數(shù)器為5，觸發(fā)監(jiān)聽(tīng)。');
    }
  },
  child: Consumer(
    builder: (context, watch, _) {
      int count = watch(counterProvider).state;
      return Text(
        '$count',
        style: Theme.of(context).textTheme.headline4,
      );
    },
  ),
),

ScopeProvider

一般我們?cè)趯?shí)現(xiàn)一個(gè)列表的Item時(shí)，需要傳入相應(yīng)的index大致如下：

ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) {
    return ProductItem(index: index);
  },
)

如果使用ScopedProvider并結(jié)合 ProviderScope，就可以簡(jiǎn)單的獲取index，不必從構(gòu)造方法接收它。使用起來(lái)很簡(jiǎn)單，直接上代碼：

/// 定義ScopedProvider
final ScopedProvider<int> currentProductIndex = ScopedProvider<int>(null);

class ScopeProviderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScopedProvider'),
      ),
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ProviderScope(
            overrides: [
              /// 修改value
              currentProductIndex.overrideWithValue(index),
            ],
            /// 使用'const'關(guān)鍵字實(shí)例化了“ProductItem”，
            /// 但仍然可以在內(nèi)部動(dòng)態(tài)獲取內(nèi)容。
            child: const ProductItem(),
          );
        },
      ),
    );
  }
}

class ProductItem extends ConsumerWidget {

  const ProductItem({Key key}): super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    /// 獲取相應(yīng)index
    final index = watch(currentProductIndex);
    return ListTile(title: Text('item $index'));
  }
}

4.修飾符

family

family的作用是可以在獲取provider時(shí)可以添加一個(gè)參數(shù)。直接上例子，一看便知：

/// 使用family，可以在獲取provider時(shí)傳入city
final _weatherProvider = Provider.family<String, String>((ref, city) {
  return '$city (Sunny)';
});

class FamilyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Family')),
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            /// 這里可以傳參“London”
            final String weather = watch(_weatherProvider('London'));
            return Text('$weather',);
          },
        ),
      ),
    );
  }
}

注意： 使用family時(shí)傳入的參數(shù)是有限制的。比如bool 、int 、 double 、 String 、常量或是重寫(xiě)了==和hashCode的不可變對(duì)象。

autoDispose

前面我們的例子中，創(chuàng)建的provider因?yàn)楸４嬖赪idget Tree的根部。所以即使頁(yè)面關(guān)閉，再次進(jìn)入頁(yè)面時(shí)會(huì)獲取之前的狀態(tài)。

這顯然是不靈活的，那么這里就可以使用autoDispose，它可以在我們不再使用provider時(shí)，自動(dòng)將其銷(xiāo)毀。那么合理的使用它可以避免內(nèi)存泄漏。

比如之前的計(jì)數(shù)器例子，只需加一個(gè)autoDispose就可以避免此類(lèi)問(wèn)題。

final stateProvider = StateProvider.autoDispose((_) => 0);

如果你需要自定義dispose事件，可以使用onDispose。比如你的provider中有網(wǎng)絡(luò)請(qǐng)求(使用Dio)：

final myProvider = FutureProvider.autoDispose((ref) async {
  
  final cancelToken = CancelToken();
  // 當(dāng)provider被銷(xiāo)毀時(shí)，取消http請(qǐng)求
  ref.onDispose(() => cancelToken.cancel());

  // http請(qǐng)求
  final response = await dio.get('path', cancelToken: cancelToken);
  // 如果請(qǐng)求成功完成，則保持該狀態(tài)。
  ref.maintainState = true;
  return response;
});

上面代碼中出現(xiàn)了ref.maintainState，這個(gè)參數(shù)默認(rèn)為false。如果用戶離開(kāi)頁(yè)面并且請(qǐng)求失敗，下次則將再次執(zhí)行該請(qǐng)求。但是，如果請(qǐng)求成功完成（maintainState為true），則將保留狀態(tài)，下次重新進(jìn)入頁(yè)面時(shí)不會(huì)觸發(fā)新的請(qǐng)求。

使用autoDispose可以達(dá)到限制provider是全局還是局部作用。這樣一來(lái)，可以更方便的解決跨頁(yè)面使用provider的問(wèn)題。

5.進(jìn)階使用

Combining providers

1.如果創(chuàng)建的provider需要另一個(gè)provider的狀態(tài)，這時(shí)就需要使用ProviderReference的read方法。

下面的示例是，給予城市和國(guó)家的provider，當(dāng)創(chuàng)建locationProvider時(shí)，獲取城市和國(guó)家的狀態(tài)。

final Provider<String> cityProvider = Provider((ref) => 'London');
final Provider<String> countryProvider = Provider((ref) => 'England');
final Provider<Location> locationProvider = Provider((ref) => Location(ref));

class Location {
  Location(this._ref);

  final ProviderReference _ref;

  String get label {
    /// read 獲取
    final city = _ref.read(cityProvider);
    final country = _ref.read(countryProvider);
    return '$city ($country)';
  }
}

使用Riverpod就可以提供多個(gè)相同類(lèi)型的Provider，這也是相比Provider的一個(gè)優(yōu)點(diǎn)。

2.如果獲取的狀態(tài)值會(huì)發(fā)生變化，我們需要監(jiān)聽(tīng)它?？梢允褂?code>ProviderReference的watch方法。

下面的示例是，給予城市provider，當(dāng)城市變化時(shí)，天氣也相應(yīng)變化。

final StateProvider<String> cityProvider = StateProvider((ref) => 'London');
final StateProvider<String> weatherProvider = StateProvider((ref) {
  /// watch監(jiān)聽(tīng)
  final String city = ref.watch(cityProvider).state;
  return '$city (Sunny)';
});

class CombiningProviderExample2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CombiningProvider')),
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            final String weather = watch(weatherProvider).state;
            return Text('$weather',);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          String city = context.read(cityProvider).state;
                /// 修改狀態(tài)
          if (city == 'London') {
            context.read(cityProvider).state = "Xi'an";
          } else {
            context.read(cityProvider).state = 'London';
          }
        },
        tooltip: 'Refresh',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

refresh

強(qiáng)制provider立即刷新，重新返回創(chuàng)建的值。這種適合列表下拉刷新，或者請(qǐng)求數(shù)據(jù)錯(cuò)誤時(shí)重試。


final FutureProvider<List<String>> productsProvider = FutureProvider((_) async {
  /// 延時(shí)3s
  await Future.delayed(const Duration(seconds: 3));
  return List.generate(50, (index) => 'Item $index');
});

class RefreshProviderExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RefreshProvider'),
      ),
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            AsyncValue<List<String>> productsProviderValue = watch(productsProvider);
            return productsProviderValue.when(
              loading: () => CircularProgressIndicator(),
              error: (error, stack) => Text('Oops, something unexpected happened'),
              data: (list) => RefreshIndicator(
                onRefresh: () => context.refresh(productsProvider), /// 刷新
                child: ListView(
                  children: [
                    for (final item in list) ListTile(title: Text(item)),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

select

當(dāng)狀態(tài)中某一個(gè)值發(fā)生變化時(shí)，相應(yīng)Consumer下的builder就會(huì)執(zhí)行，重建widget。如果使用select可以指定某一值更改時(shí)進(jìn)行刷新，精準(zhǔn)控制刷新范圍，避免不必要的rebuild。

不過(guò)目前（0.14.1版本），select這種局部監(jiān)聽(tīng)只支持使用hooks_riverpod包的useProvider。所以這里需要引用hooks_riverpod。

final ChangeNotifierProvider<Person> personProvider = ChangeNotifierProvider((_) => Person());

class Person extends ChangeNotifier {
  int _age = 0;
  int get age => _age;
  set age(int age) {
    _age = age;
    notifyListeners();
  }

  String _name = 'weilu';
  String get name => _name;
  set name(String name) {
    _name = name;
    notifyListeners();
  }
}

class SelectExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            HookBuilder(
              builder: (_) {
                String name = useProvider(personProvider.select((p) => p.name));
                /// 如果使用下面的方式，則age變化時(shí)，這里的Text也會(huì)刷新。
//                String name = useProvider(personProvider).name;
                return Text(
                  'name:$name',
                );
              },
            ),
            HookBuilder(
              builder: (_) {
                int age = useProvider(personProvider.select((p) => p.age));
                return Text(
                  'age:$age',
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 這里age變化時(shí)，只有對(duì)應(yīng)的Text會(huì)變化。
        onPressed: () => context.read(personProvider).age = Random.secure().nextInt(255),
        tooltip: 'Refresh',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

其他

細(xì)心的你會(huì)發(fā)現(xiàn)，在使用read獲取provider時(shí)還是使用了context。一開(kāi)始不是說(shuō)，沒(méi)有使用InheritedWidget，所以也不需要BuildContext嗎？

其實(shí)Riverpod本身確實(shí)如此，但是在Flutter的應(yīng)用中，為了便于高效（時(shí)間復(fù)雜度O(1)）的在Widget Tree中獲取ProviderContainer（在ProviderScope中隱式創(chuàng)建，用來(lái)儲(chǔ)存provider），需要在根部使用InheritedWidget，便于最終獲取provider。

read、refresh、Consumer、ProviderListener等方法和Widget的內(nèi)部其實(shí)都調(diào)用了ProviderScope.containerOf(context, listen = xx);，不同的是listen的值。

static ProviderContainer containerOf(
    BuildContext context, {
    bool listen = true,
  }) {
    UncontrolledProviderScope scope;
    if (listen) {
      scope = context //
          .dependOnInheritedWidgetOfExactType<UncontrolledProviderScope>();
    } else {
      scope = context
          .getElementForInheritedWidgetOfExactType<UncontrolledProviderScope>()
          .widget as UncontrolledProviderScope;
    }
    return scope.container;
  }

比如read中l(wèi)isten的值為false，使用getElementForInheritedWidgetOfExactType方法，這樣在數(shù)據(jù)發(fā)生變化時(shí)就不會(huì)掉用didChangeDependencies，避免不必要的rebuild。相對(duì)的，Consumer、ProviderListener中l(wèi)isten的值為ture，會(huì)實(shí)現(xiàn)我們需要的widget重建。

我們可以還可以通過(guò)Flutter Inspector檢查已有的狀態(tài)，所有狀態(tài)匯總在ProviderScope下面，這也是Riverpod的一個(gè)優(yōu)點(diǎn)。如下圖所示：

Flutter Inspector

發(fā)布本篇時(shí)，有關(guān)Riverpod的資料與討論很少。本篇也是我在實(shí)踐完官網(wǎng)文檔后的理解，如有錯(cuò)誤，歡迎指出！

個(gè)人認(rèn)為Riverpod是相對(duì)更輕松便捷的一種狀態(tài)管理方式，待它穩(wěn)定時(shí)應(yīng)該能被更多的人喜愛(ài)。

Riverpod的相關(guān)示例代碼我已經(jīng)上傳至Github，有興趣的可以看看。后面如果Riverpod有變動(dòng)時(shí)，我也會(huì)及時(shí)更新。大家可以收藏起來(lái)，多多點(diǎn)贊支持一下，給我點(diǎn)更新動(dòng)力！

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容