Flutter | 状态管理特别篇——Provide

前言

今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架，2月8日才第一次提交，非常新鲜。在简单上手之后感觉就是一个字——爽！所以今天就跟大家分享一下这个新的状态管理框架。

Provider被设计为ScopedModel的替代品，并且允许我们更加灵活地处理数据类型和数据。但是首先呢还是先说说老生常谈的状态管理。

为什么需要状态管理

在我们一开始构建应用的时候，也许很简单。我们有一些状态，直接把他们映射成视图就可以了。这种简单应用可能并不需要状态管理。

但是随着功能的增加，你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样。

Wow，这是什么鬼。我们很难再清楚的测试维护我们的状态，因为它看上去实在是太复杂了！而且还会有多个页面共享同一个状态，例如当你进入一个文章点赞，退出到外部缩略展示的时候，外部也需要显示点赞数，这时候就需要同步这两个状态。

这时候，我们便迫切的需要一个架构来帮助我们理清这些关系，状态管理框架应运而生。

什么是Provide

和Scoped_model一样，Provide也是借助了InheritWidget，将共享状态放到顶层MaterialApp之上。底层部件通过Provier获取该状态，并通过混合ChangeNotifier通知依赖于该状态的组件刷新。

Provide还提供了Provide.stream，让我们能够以处理流的方式处理数据，不过目前还有一些问题，不推荐使用。

Lets do it！

我们这里还是以一个简单app为例，详细介绍Provide的用法。其中涉及共享状态以及多个状态之间如何管理。

这两个页面都同时依赖于counter 和 switcher两个不同的状态。并且一个页面改变状态之后另外一个页面状态也随之改变。

该项目完整代码已放在 Github

第一步：添加依赖

在pubspec.yaml中添加Provide的依赖。

• 实际添加请参考： https://pub.dartlang.org/packages/provide#-installing-tab-

• 由于版本冲突添加失败请参考: https://juejin.im/post/5b8958d351882542b03e6d57

第二步：创建Model

这里实际上它承担了State的职责，但是为了和官方的State区分所以叫做model。

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{
  int value = 0;

  increment(){
    value++;
    notifyListeners();
  }
}

这里我们可以看到，数据和操作数据的方法都在model中，我们可以很清晰的把业务分离出来。

对比Scoped_model可以发现，Provide模式中model不再需要继承Model类，只需要实现Listenable，我们这里混入ChangeNotifier，可以不用管理听众。

通过 notifyListeners 我们可以通知听众刷新。

第三步：将状态放入顶层

void main() {
  var counter = Counter();
  var providers = Providers();

//将counter对象添加进providers
  providers.provide(Provider

  
   
 .
 
   value(counter));
 
   

 
   
  runApp(
 
   
    ProviderNode(
 
   
        child: MyApp(), 
 
   
        providers: providers),
 
   
    );
 
   
}
 
   


  

ProviderNode封装了InheritWidget，并且提供了 一个providers容器用于放置状态。

providers内部通过 Map >来储存provider，在存放的时候你可以通过传入ProviderScope("name")来指定key。

Provider .value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

第四步：获取状态

同样的Provide也提供了两种获取State的方法。我们先来介绍第一种，通过Provide 小部件获取。

Provide

  
   
 (
 
   
              builder: (context, child, counter) {
 
   
                
 
   return Text(
 
   
                  
 
   '${counter.value}',
 
   
                  style: Theme.
 
   of(context).textTheme.display1,
 
   
                );
 
   
              },
 
   
            ),
 
   


  

每次通知数据刷新时，builder将会重新构建这个小部件。

builder方法接收三个参数，这里主要介绍第二个和第三个。

• 第二个参数child：假如这个小部件足够复杂，内部有一些小部件是不会改变的，那么我们可以将这部分小部件写在Provide的child属性中，让builder不再重复创建这些小部件，以提升性能。

• 第三个参数counter：这个参数代表了我们获取的顶层providers中的状态 。

scope：通过指定ProviderScope获取该键所对应的状态。在需要使用多个相同类型状态的时候使用。

第二种获取方式：Provide.value (context)

final currentCounter = Provide.value
<counter>
 (context);
</counter>

这种方式实际上调用了context.inheritFromWidgetOfExactType找到顶层的_InheritedProviders来获取到顶层providers中的状态。

如何组织多个状态

和scoped_model不同的是，provide模式中你可以轻松组织多个状态。只需要将状态provide进provider中就可以了。

void main() {
  var counter = Counter();
  var switcher = Switcher();

  var providers = Providers();

  providers
    ..provide(Provider

  
   
 .
 
   value(counter))
 
   
    ..provide(Provider
 
   
    
  .
  
    value(switcher));
  
    

  
    
  runApp(
  
    
    ProviderNode(
  
    
        child: MyApp(), 
  
    
        providers: providers)
  
    
    );
  
    
}
  
    

 
   

  

获取数据流

在将counter添加进providers的过程中进行了一次包装。我们刚才通过分析源码知道了这个操作能够让我们处理流式数据。

通过 Provide.stream (context) 就能获取数据流。

StreamBuilder

  
   
 (
 
   
          initialData: currentCounter,
 
   
          stream: Provide.stream
 
   
    
  (context)
  
    
              .where(
  
    (counter) => counter.value % 
  
    2 == 
  
    0),
  
    
          builder: 
  
    (context, snapshot) =>
  
    
              Text(
  
    'Last even value: ${snapshot.data.value}')),
  
    

 
   

  

不过在我的使用当中出现了streamTransformer失效的情况。在firstScreen和secondScreen同样应用这一段相同的代码，second screen的where方法能够生效，过滤掉奇数数据，而first screen中则是收到了完整的数据。 具体还未找到原因，不过可以肯定的是，这个流是一个广播流。如果是我理解有问题还请大神指出，感谢