无法在颤动的平面按钮中使用 Provider 将数据添加到列表答案

【问题标题】：Can't add the data to list using Provider in flat button on flutter无法在颤动的平面按钮中使用 Provider 将数据添加到列表
【发布时间】：2021-01-10 13:25:41
【问题描述】：

我在这个 Flutter 代码中使用了 provider 4.3.2，这是一个简单的 Flutter 应用程序，它有一个文本字段、平面按钮和一个包含文本小部件的列表视图构建器。我创建了一个具有列表的类 ListData，并使用提供程序显示在列表视图构建器中。这就是问题所在，我在 ListData 类中创建了一个 addData 方法。我使用此方法在平面按钮的 onPressed 方法中使用提供程序将数据添加到列表中添加它是抛出错误，无法找到。这个问题的解决方案。这也是我的主要应用程序的简短形式

import 'dart:collection';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data;
    return ChangeNotifierProvider(
      create: (context) => ListData(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("list"),
          ),
          body: Column(
            children: [
              TextField(
                onChanged: (value) => data = value,
              ),
              FlatButton(
                child: Text("Add"),
                color: Colors.blue,
                onPressed: () {
                  Provider.of<ListData>(context).addData(data);
                },
              ),
              Expanded(
                child: MyListView(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Text(Provider.of<ListData>(context).listData[index]);
      },
      itemCount: Provider.of<ListData>(context).listCount,
    );
  }
}

class ListData extends ChangeNotifier {
  List _listData = [
    'Hello',
    "hi",
  ];

  UnmodifiableListView get listData {
    return UnmodifiableListView(_listData);
  }

  int get listCount {
    return _listData.length;
  }

  void addData(String data) {
    _listData.add(data);
    notifyListeners();
  }
}

【问题讨论】：

标签： flutter flutter-provider

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你需要Builder 和listen: false
代码sn-p

Builder(builder: (BuildContext context) {
        return FlatButton(
          child: Text("Add"),
          color: Colors.blue,
          onPressed: () {
            Provider.of<ListData>(context, listen: false).addData(data);
          },
        );
      }),

工作演示

完整代码

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String data;
    return ChangeNotifierProvider(
      create: (context) => ListData(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("list"),
          ),
          body: Column(
            children: [
              TextField(
                onChanged: (value) => data = value,
              ),
              Builder(builder: (BuildContext context) {
                return FlatButton(
                  child: Text("Add"),
                  color: Colors.blue,
                  onPressed: () {
                    Provider.of<ListData>(context, listen: false).addData(data);
                  },
                );
              }),
              Expanded(
                child: MyListView(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return Text(Provider.of<ListData>(context).listData[index]);
      },
      itemCount: Provider.of<ListData>(context).listCount,
    );
  }
}

class ListData extends ChangeNotifier {
  List _listData = [
    'Hello',
    "hi",
  ];

  UnmodifiableListView get listData {
    return UnmodifiableListView(_listData);
  }

  int get listCount {
    return _listData.length;
  }

  void addData(String data) {
    _listData.add(data);
    notifyListeners();
  }
}

【讨论】：

【解决方案2】：

您需要将 FlatButton 包装在 Consumer 小部件中，因为 Provider.of 是使用作为提供者祖先的 BuildContext 调用的。

return ChangeNotifierProvider(
    create: (_) => ListData(),
    child: Consumer<ListData>(
      builder: (_, listData, __) => FlatButton(onPressed: () => listData.addData(data)),
    },
  );

查看此内容以通过简单示例了解更多信息，以帮助您了解出现错误的原因以及如何使用它。

https://pub.dev/documentation/provider/latest/provider/Consumer-class.html

【讨论】：