Flutter是Google(全球頂級互聯網科技公司)出品，后臺夠硬，毫無疑問Flutter即將或已經成為跨平臺開發的主流，Flutter野心很大，不僅沖擊著原生開發，而且很有可能會燒到Web前端。作為移動端開發者的你，如果不關注Flutter的話，實在說不過去啦！

Flutter跨組件狀態共享（Provider）應用

一、效果圖

界面初始化狀態

分別點擊兩個按鈕，數據會相應變化

2、Flutter中集Provider

在pubspec.yaml文件中添加Provider，當前版本1.1.0：

 provider: ^3.1.0

2、創建用戶實體

商品實體

class Item {
  Item(this.price, this.count);
  double price; //商品單價
  int count; // 商品份數
}

創建CartModel用來管理商品數據

import 'package:flutter/material.dart';
import 'package:ydcflutter_app/common/test/Item.dart';

class CartModel extends ChangeNotifier {
  // 用于保存購物車中商品列表
  final List<Item> _items = [];
  // 購物車中商品的總價
  double get totalPrice =>
      _items.fold(0, (value, item) => value + item.count * item.price);

  // 將 [item] 添加到購物車。這是唯一一種能從外部改變購物車的方法。
  void add(Item item) {
    _items.add(item);
    // 通知監聽器（訂閱者），重新構建InheritedProvider， 更新狀態。
    notifyListeners();
  }
  var name;

  CartModel(this.name);

  void setName(String name) {
    this.name = name;
    notifyListeners();
  }

  String get getName => this.name;

}

我們將要共享的狀態放到一個 CartModel類中，然后讓它繼承自ChangeNotifier，這樣當共享的狀態改變時，我們只需要調用notifyListeners() 來通知訂閱者，然后由訂閱者來重新構建InheritedProvider，達到刷新頁面的目的。

3、使用ChangeNotifierProvider綁定數據

import 'package:flutter/material.dart';
import 'package:ydcflutter_app/common/test/CartModel.dart';
import 'package:ydcflutter_app/common/test/Item.dart';
import 'package:provider/provider.dart';

class TestPage extends StatefulWidget {
  @override
  State createState() => new _TestPageState();
}

class _TestPageState extends State<TestPage> {

  BuildContext mContext;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold( body:Center(
      child: ChangeNotifierProvider<CartModel>.value(
        value: new CartModel("格子襯衫"),
        child: Builder(builder: (context) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Builder(builder: (context) {
                var cart = Provider.of<CartModel>(context);
                return Text("商品名稱: ${cart.name}");
              }),
              Builder(builder: (context) {
                var cart = Provider.of<CartModel>(context);
                return Text("總價: ${cart.totalPrice}");
              }),
              Builder(builder: (context) {
                print("RaisedButton build"); //在后面優化部分會用到
                return RaisedButton(
                  child: Text("添加商品"),
                  onPressed: () {
                    //給購物車中添加商品，添加后總價會更新
                    Provider.of<CartModel>(context).add(Item(10.0, 1));
                  },
                );
              }),
              Builder(builder: (context) {
                print("RaisedButton build"); //在后面優化部分會用到
                return RaisedButton(
                  child: Text("修改商品名稱"),
                  onPressed: () {
                    //使用Provider修改商品名稱
                    Provider.of<CartModel>(context).setName("修改為無用牌毛巾");
                  },
                );
              }),

            ],
          );
        }),
      ),
    ));
  }


  Widget dividerWidget = new Container(
    //margin: const EdgeInsets.only( left: 10.0,right: 10.0),
      child: new Padding(
          padding: const EdgeInsets.only(left: 0.0, right: 0.0),
          child:
          new Divider(height: 1.0, indent: 0.0, color: Color(0xFFe5e5e5))
      )

  );

  @override
  void dispose() {
    super.dispose();
  }
}

ChangeNotifierProvider調用value()方法，里面傳出notifier(CartModel)和child，并初始化了默認數據。

4、使用Provider獲取數據

 Builder(builder: (context) {
                var cart = Provider.of<CartModel>(context);
                return Text("商品名稱: ${cart.name}");
              }),

5、使用Provider更新數據

   Builder(builder: (context) {
                print("RaisedButton build"); //在后面優化部分會用到
                return RaisedButton(
                  child: Text("添加商品"),
                  onPressed: () {
                    //給購物車中添加商品，添加后總價會更新
                    Provider.of<CartModel>(context).add(Item(10.0, 1));
                  },
                );
              }),
              Builder(builder: (context) {
                print("RaisedButton build"); //在后面優化部分會用到
                return RaisedButton(
                  child: Text("修改商品名稱"),
                  onPressed: () {
                    //使用Provider修改商品名稱
                    Provider.of<CartModel>(context).setName("修改為無用牌毛巾");
                  },
                );
              }),

通過調用 ChangeNotifier.notifyListeners 對 ChangeNotifier(CartModel) 進行監聽，將其公開給它的子 Widget 并重建依賴項，從而刷新我們的UI。

以上已經完成單個頁面狀態的管理，如果你想實現跨組件，跨路由狀態共享。你只要把ChangeNotifierProvider放在整個應用的Widget樹的根上即可。

各個頁面中直接這樣使用即可。

Flutter商城項目實戰：https://github.com/dechengyang/ydc_flutter_app

如果對你有幫助，隨意賞我奶粉錢吧,多謝！

微信：

支付寶: