Flutter之状态管理Provider使用和详解

在前端页面,状态管理和消息传递一直是我们开发一个交互性好,体验好的前端应用或者APP必须要提到的东西,设想一下我们需要两个组件之间共享数据,而且两个组件之间具有联动效果，对于Flutter来说我们能够把数据保存到一个全局变量,然后每次使用的时候使用StatefulWidget来进行setState对组件所有组件进行重新渲染，确实这不为是一个好方法，而且我们的组件必须写在一个大的类里面,因为StatefulWidget的setState只对当前类是有效的。但是这样做的缺点也很多，这里就不做过多解释，想了解的小伙伴可以看一下软件设计的原则和设计模式自然会有所体会。

那么接下来介绍我们今天的主角Provider它也能够实现如上的功能，但是它能够很好的把之前的耦合度降到最低，同时能够让我们的组件和组件之间隔离，使得我们的业务逻辑和页面显示相互分离，下面我们来看一下Provider的使用方式。

首先创建Flutter项目，使用命令 ，然后等待项目构建完成，我这里使用最新发布的Flutter2.8.3来构建项目。

flutter create demo-app

使用VSCode来打开项目查看项目结构,如下所示:

在pubspec.yaml中引入provider库：

如下所示:

至此之后我们就可以在我们的项目中使用 Provider 了,我们就可以来lib下面编写我们的 Provider 代码了，如下图所示我们在lib目录下面创建如下目录，

其中view存放视图代码,notifier存放前端交互代码，我们下面以Flutter的计数器为例讲解Provider的使用。首先在notifier创建count_notifier.dart，在views创建count_screen.dart两个dart，

在count_notifier.dart编写如下代码 首先需要继承changeNotifier

然后编写视图如下图所示

将这个页面挂载到main.dart里面 如下图所示

 

现在运行看效果

完成！