Flutter状态管理：Provider使用之ChangeNotifierProvider

Provider类型

ChangeNotifierProvider实践

Top1

导入provider库

dependencies:
  flutter:
    sdk: flutter

  provider: ^4.3.1

Top2

注册通知：定义一个ChangeNotifier，管理需要监听状态的数据模型。

///1:定义一个ChangeNotifier，来负责数据的变化通知
class TextValueAvaliableNotifier extends ChangeNotifier {
  bool _textValueAvaliable1 = false;
  bool _textValueAvaliable2 = false;
  bool _textvalueAvaliable3 = false;

  bool isTextValueAvaliable() => _textValueAvaliable1;

  void setTextValueAvaliable1(bool result) {
    _textValueAvaliable1 = result;
    notifyListeners();
  }

  bool isTextValueAvaliable2() => _textValueAvaliable2;

  void setTextValueAvaliable2(bool result) {
    _textValueAvaliable2 = result;
    notifyListeners();
  }

  bool isTextValueAvaliable3() => _textvalueAvaliable3;

  void setTextValueAvaliable3(bool result) {
    _textvalueAvaliable3 = result;
    notifyListeners();
  }
}

Top3

使用ChangeNotifierProvider注册通知

ChangeNotifierProvider<TextValueAvaliableNotifier>.value(
                value: mTextAvaliableChangeNotifier,

Top4

Consumer接收通知消息，并改变UI

Consumer<TextValueAvaliableNotifier>(
                        builder: (context, textValueAvaliableNotifier, child) {
                      return changePWBuild(
                        context,
                        '设置新密码：',
                        mTextAvaliableChangeNotifier.isTextValueAvaliable2(),
                        newpwNode,
                        twoPWNode,
                        newPWEC,
                      );
                    }),

流程图

class MineChangePWPage extends StatefulWidget {
  @override
  MineChangePWPageState createState() => MineChangePWPageState();
}

class MineChangePWPageState extends State<MineChangePWPage> {
  TextEditingController oldPWEC = new TextEditingController();
  FocusNode oldNode = FocusNode();
  TextEditingController newPWEC = new TextEditingController();
  FocusNode newpwNode = FocusNode();
  TextEditingController twoPWEC = new TextEditingController();
  FocusNode twoPWNode = FocusNode();

  ///TODO1 注册通知
  TextValueAvaliableNotifier mTextAvaliableChangeNotifier =
      TextValueAvaliableNotifier();

  @override
  void initState() {
    super.initState();
    oldPWEC.addListener(() {
      if (oldPWEC.text.length > 0) {
        if (!mTextAvaliableChangeNotifier.isTextValueAvaliable()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable1(true);
        }
      } else {
        if (mTextAvaliableChangeNotifier.isTextValueAvaliable()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable1(false);
        }
      }
    });
    newPWEC.addListener(() {
      if (newPWEC.text.length > 0) {
        if (!mTextAvaliableChangeNotifier.isTextValueAvaliable2()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable2(true);
        }
      } else {
        if (mTextAvaliableChangeNotifier.isTextValueAvaliable2()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable2(false);
        }
      }
    });
    twoPWEC.addListener(() {
      if (twoPWEC.text.length > 0) {
        if (!mTextAvaliableChangeNotifier.isTextValueAvaliable3()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable3(true);
        }
      } else {
        if (mTextAvaliableChangeNotifier.isTextValueAvaliable3()) {
          mTextAvaliableChangeNotifier.setTextValueAvaliable3(false);
        }
      }
    });
  }

  void saveChage() {
    FocusScope.of(context).requestFocus(FocusNode());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(title: '修改密码'),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(8),

              ///TODO2用ChangeNotifierProvider来订阅注册的通知
              child: ChangeNotifierProvider<TextValueAvaliableNotifier>.value(
                value: mTextAvaliableChangeNotifier,
                child: Column(
                  children: <Widget>[
                    ///TODO3 接收通知UI做出相应调整
                    Consumer<TextValueAvaliableNotifier>(
                        builder: (context, textValueAvaliableNotifier, child) {
                      return changePWBuild(
                        context,
                        '旧密码：',
                        mTextAvaliableChangeNotifier.isTextValueAvaliable(),
                        oldNode,
                        newpwNode,
                        oldPWEC,
                      );
                    }),
                    Divider(
                        height: 1.0,
                        indent: 0.0,
                        color: BaseColor.colorFFEBEBEB),
                    Consumer<TextValueAvaliableNotifier>(
                        builder: (context, textValueAvaliableNotifier, child) {
                      return changePWBuild(
                        context,
                        '设置新密码：',
                        mTextAvaliableChangeNotifier.isTextValueAvaliable2(),
                        newpwNode,
                        twoPWNode,
                        newPWEC,
                      );
                    }),
                    Divider(
                        height: 1.0,
                        indent: 0.0,
                        color: BaseColor.colorFFEBEBEB),
                    Consumer<TextValueAvaliableNotifier>(
                        builder: (context, textValueAvaliableNotifier, child) {
                      return changePWBuild(
                        context,
                        '确认新密码：',
                        mTextAvaliableChangeNotifier.isTextValueAvaliable3(),
                        twoPWNode,
                        FocusNode(),
                        twoPWEC,
                      );
                    }),
                    SizedBox(height: 40),
                    Container(
                      height: 48,
                      width: BaseSize.screenWidth - 76,
                      child: FlatButton(
                        color: BaseColor.colorFF03B798,
                        onPressed: saveChage,
                        child: Text(
                          '确定',
                          style: BaseTextStyle.styleFFFFFF_16,
                        ),
                        shape: RoundedRectangleBorder(
                          side: BorderSide.none,
                          borderRadius: BorderRadius.all(Radius.circular(48)),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      backgroundColor: BaseColor.colorFFF5F5F5,
    );
  }

  ///修改密码
  Widget changePWBuild(
    BuildContext context,
    String name,
    bool show,
    FocusNode focusNode,
    FocusNode nextFocusNode,
    TextEditingController _textEditingController,
  ) {
    return Container(
      color: BaseColor.colorFFFFFFFF,
      height: 56,
      padding: EdgeInsets.only(left: 16, right: 0),
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 100,
            child: Text(
              name,
              style: BaseTextStyle.style999999_14,
            ),
          ),
          Expanded(
            child: TextField(
              focusNode: focusNode,
              controller: _textEditingController,
              style: BaseTextStyle.style262626_14, //文本框内容风格
              textInputAction: TextInputAction.next, //右下角键盘文字：下一项
              obscureText: true, //明/密文
              inputFormatters: <TextInputFormatter>[
                LengthLimitingTextInputFormatter(16) //限制长度
              ],
              onEditingComplete: () =>
                  FocusScope.of(context).requestFocus(nextFocusNode),
              decoration: InputDecoration(
                  border: InputBorder.none, // 去掉下划线
                  hintText: '请填写', //占位字符
                  hintStyle: BaseTextStyle.styleD9D9D9_14, //占位字符样式
                  suffixIcon: show
                      ? IconButton(
                          icon: ImageIcon(
                              AssetImage(IconUtils.getIconPath('quxiaoshuru'))),
                          onPressed: () {
                            WidgetsBinding.instance.addPostFrameCallback(
                                (_) => _textEditingController.clear());
                          })
                      : null),
              onChanged: (value) {
                ///TODO4 使用Provider.of来更新数据
                Provider.of<TextValueAvaliableNotifier>(context, listen: false)
                    .setTextValueAvaliable1(value.length > 0);
              },
            ),
          ),
        ],
      ),
    );
  }

class TextValueAvaliableNotifier extends ChangeNotifier {
  bool _textValueAvaliable1 = false;
  bool _textValueAvaliable2 = false;
  bool _textvalueAvaliable3 = false;

  bool isTextValueAvaliable() => _textValueAvaliable1;

  void setTextValueAvaliable1(bool result) {
    _textValueAvaliable1 = result;
    notifyListeners();
  }

  bool isTextValueAvaliable2() => _textValueAvaliable2;

  void setTextValueAvaliable2(bool result) {
    _textValueAvaliable2 = result;
    notifyListeners();
  }

  bool isTextValueAvaliable3() => _textvalueAvaliable3;

  void setTextValueAvaliable3(bool result) {
    _textvalueAvaliable3 = result;
    notifyListeners();
  }
}

参考1
参考2