Flutter Provider入门(二)

2019-11-15  本文已影响0人  西风兔

任何一个App都会有username这种需要全局使用的数据
任何一个App都会有userdata数据发生变化相关UI的同步更新的需求

本节我们来使用Provider解决第二个问题,
请先阅读Flutter Provider入门(一)
首先改造一下MyApp类
将包裹AppWidget的Provider更改为ChangeNotifierProvider

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<TitleText>(
      builder: (context) => TitleText(),
       child: MaterialApp(
         title: 'flutter demo',
         home: const MyHomePage(),
    ),
    );
  }
}

改造一下title.dart文件

import 'package:flutter/foundation.dart';

class TitleText with ChangeNotifier{
  String  _title = '12345';
  String  get title => _title;
  void set(String title) {
    _title = title;
    notifyListeners();
  }
}

运行程序,得到一下错误提示:

════════ Exception caught by foundation library ════════════════════════════════════════════════════
The following assertion was thrown while dispatching notifications for TitleText:
setState() or markNeedsBuild() called during build.

意思就是我们在更新UI的时候又触发UI更改,问题来自以下代码

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final titleText = Provider.of<TitleText>(context);
   /// 在build中设置set会导致build的调用,从而引起死循环
    titleText.set('我是共享文字');
    return Scaffold(
        appBar: AppBar(title: Text('first')),
        body: Center(
            child: FlatButton(
            onPressed: (){
                 Navigator.push(context, MaterialPageRoute(builder: (context){
                      return SecondRoute();
               }));
            },
            child: Text(titleText.title)
            )
        ),
        //floatingActionButton : const IncrementCounterButton()
    );
  }
}

删除

titleText.set('我是共享文字');

运行代码,可以看到点击SecondRoute中的更新按钮,
两个页面的按钮文字都同步发生了变化。

让我们来研究一下官方的Demo
并对诸如ChangeNotifierProvider从何处来,用法为何做一个深入
Flutter Provider入门(三)

上一篇下一篇

猜你喜欢

热点阅读