Provider数据共享

Provider 数据共享

添加依赖

provider:

默认添加最新版本的依赖

创建store类

class CounterProvider with ChangeNotifier {
  int _number = 0;
  int get value => _number;
  void changeNumber() {
    _number++;
    notifyListeners();
  }
}

包含两个方法,get方法用于获取数值,changeNumber方法用于改变数值并通知监听改变.每个provider的store类结构都差不多.

main.dart

在顶层声明的provider,默认是全局的.

如果有多个provider,使用MultiProvider

void main() {
  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(
        create: (_) =>
            ThemeBean(themeType: ThemeType.light, themeData: ThemeData.light()),
      ),
      ChangeNotifierProvider(create: (_) => CounterProvider())
    ],
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  MyApp() {
    final router = Router();
    Routers.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Provider.of<ThemeBean>(context, listen: true).themeData,
      onGenerateRoute: Application.router.generator,
    );
  }
}

获取数据

在home_page中获取来自另一个页面改变的数据

Text("This is from counter provider:${
     Provider.of<CounterProvider>(context).value.toString()
   }"
),

使用Provider.of<CounterProvider>(context).value获取数据, 泛型可以不填,但是为了程序的健壮,最好是写上.

改变数据

此处我们点击按钮使数值+1, 同样使用Provider.of<CounterProvider>(context, listen: false).changeNumber();方法, listen参数主要是是否需要刷新页面,此处调用改变数值的方法,不需要刷新页面, listen值默认是true,调用changeNumber后,在这个函数中会调用notifyListeners()方法,通知监听这个数值的地方进行刷新,从而得到跨组件数据共享的作用.

class ProviderCounter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider counter'),
      ),
      body: Center(
        child: Text('data: ${Provider.of<CounterProvider>(context).value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<CounterProvider>(context, listen: false).changeNumber();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}