Flutter-防京东商城项目-状态管理 多页面数据共享-23

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果：

本章目标：
1.下载全局共享的第三方
2.创建文件 里面新建共享的属性。
3.在购物车创建一个按钮 点击递增
4.在我的页面获取 递增的值 实现跨页面共享

1.安装第三方

  # 全局数据共享
  provider: ^3.0.0+1

2.把整个文件拖进去

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{

  int _count=1;  //状态

  int get count=>_count;  //获取状态

  incCount(){             //更新状态
    this._count++;
    notifyListeners();   //表示更新状态
  }

}

3.回到 main页面 配置 初始化第三方

在面导入头文件

import 'package:flutter_app/provider/Counter.dart';
import 'package:provider/provider.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //--------------------------------------------
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(builder: (_) => Counter())
      ],
      child: MaterialApp(
//--------------------------------------------
        // home: Tabs(),
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute,
        theme: ThemeData(
          // primaryColor: Colors.yellow
            primaryColor: Colors.white),
      ),
 //--------------------------------------------
    );
//--------------------------------------------
  }
}

4.回到购物页面 (CartPage) 在购物车引入文件

import '../../provider/Counter.dart';
import 'package:provider/provider.dart';

5. 购物页面 (CartPage) 创建一个属性进行接收显示

回到 购物页面 (CartPage) 创建一个按钮 点击递增值 然后全局保存起来 等一下在我的页面里面显示购物车递增的值。这样实现全局数据共享(跨页面数据传递)

 @override
  Widget build(BuildContext context) {
//--------------------------------------------
    var counterProvider = Provider.of<Counter>(context);

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          counterProvider.incCount();         
        },
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Text("${counterProvider.count}",style: TextStyle(
          fontSize: 50
        )),
      ),
    );
//--------------------------------------------
  }
}

6.在我的页面(UserPage)引入 显示数据

我的页面 (UserPage) 引入头文件

import '../../provider/Counter.dart';
import 'package:provider/provider.dart';

//--------------------------------------------
var counterProvider=Provider.of<Counter>(context);  
//-------------------------------------------- 


return Center(
//--------------------------------------------
  child: Text("${counterProvider.count}",style: TextStyle(
      fontSize: 50
    )),
//--------------------------------------------    
);