Flutter之状态管理Provide

前面有介绍过，数据的传递可以经过共享，但是只能单向传递，这儿介绍一个可以双项传递数据的第三方工具Provide链接

运用前的准备

首先在pubspec.yaml中配置，然后pub get,等待安装完结

咱们首先创立两个比较简单的操控器，测试页面跳转之间的数据传递。

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstPage(),
    );
  }
}
class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('first page')),
      body: Center(
        child: Text('first page count='),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.polymer),
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => SecondPage())),
      ),
    );
  }
}
class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('second page')),
      body: Center(
        child: Text('Second page count='),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () => print('+++'),
      ),
    );
  }
}

完成要求：点击FirstPage按钮跳转到SecondPage在第二个页面修正值，然后的第一个页面的值也能相应的改动

数据关联模型创立

界说数据模型，经过混入 ChangeNotifier 办理监听者（告诉形式），暴露读写方法，数据改动的时分告诉监听者改写

// 界说数据模型，经过混入 ChangeNotifier 办理监听者（告诉形式）
class CountModel with ChangeNotifier {
  int _count = 0;
  // 读方法
  int get counter => _count;
  // 写方法
  void increment() {
    _count++;
    notifyListeners(); // 告诉监听者改写
  }
}

数据包装

这儿咱们在根视图这儿包装数据，这样子层级都可以运用。这儿运用的是ChangeNotifierProvider.value指定Value

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
        value: CountModel(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const FirstPage(),
        ));
  }
}

数据运用

首先取出模型数据Provider.of<CountModel>(context)，然后就可以经过读方法和写方法来操作，仍是比较简便的。

  @override
  Widget build(BuildContext context) {
    final _counter = Provider.of<CountModel>(context);
    return Scaffold(
      appBar: AppBar(title: Text('first page')),
      body: Center(
        child: Text('first page count=${_counter.counter}'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.polymer),
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => SecondPage())),
      ),
    );
  }

这儿有一个优化的当地，在咱们修正数据的时分会从头走Build方法来烘托当前的页面，这儿会涉及到屡次烘托的问题，所以咱们需求操控Widget的改写粒度来到达优化功能的意图。

优化

不再统一取数据，而是哪里运用的话哪里取数据，这儿运用了一个Consumer<CountModel> ,看一下consumer.dart中的注释

在下面的示例中，当Bar数据改动的时分FooWidget和BarWidget都会从头rebuild,事实上，只要BarWidgetr需求改写。解决这种方法便是需求在BarWidget外面包装一层Consumer,这样被包装的Widget才会被改写。

/// Here's an example:
///
/// ```dart
///  @override
///  Widget build(BuildContext context) {
///    return FooWidget(
///      child: BarWidget(
///        bar: Provider.of<Bar>(context),
///      ),
///    );
///  }
/// ```
///
/// In the above code, only `BarWidget` depends on the value returned by
/// [Provider.of]. But when `Bar` changes, then both `BarWidget` _and_
/// `FooWidget` will rebuild.
///
/// Ideally, only `BarWidget` should be rebuilt. One
/// solution to achieve that is to use [Consumer].
///
/// To do so, we will wrap _only_ the widgets that depends on a provider into
/// a [Consumer]:
///
/// ```dart
///  @override
///  Widget build(BuildContext context) {
///    return FooWidget(
///      child: Consumer<Bar>(
///        builder: (_, bar, __) => BarWidget(bar: bar),
///      ),
///    );
///  }
///