Flutter provider劝退经历

前言

最近在学习Flutter中的状态管理用到provider时，原本以为按着文档的简单示例写一点问题都没有，结果惨遭各种翻车，整个屏幕宛如一片红海，因此，写下该篇文章，记录学习。那现在就开始吧。

使用Provider

这里先使用新建Flutter项目的计数器来演示。

• 导入依赖
  在项目中的pubspec.yaml中导入provider最新的版本依赖，目前最新版本为4.3.2。

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2 # 导入最新版本

• 构建Model
  新建CountModel类并继承于ChangeNotifier，定义成员变量count用于存储当前计数值，定义方法increment使count值自增1。

import 'package:flutter/material.dart';

class CountModel extends ChangeNotifier{
   

  int count = 0;

  void increment(){
   
    count++;
    notifyListeners();	// 通知数据更新了。
  }

}

• 使用Provider
  首先我们看看文档推荐的使用方式：

// DO create a new object inside create.
Provider(
  create: (_) => MyModel(),
  child: ...
)

我们按照这种方式使用，看起来超级简单，实际上处处劝退。

这里省略计数器示例的其他代码，仅展示build方法代码。

@override
  Widget build(BuildContext context) {
   
    return Provider(
      create: (_) => CountModel(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${context.watch<CountModel>().count}',	// 观察值的变化
                style: Theme.of(context).textTheme.headline4,
              )