Flutter - 在小部件中找不到正确的提供程序答案

【问题标题】：Flutter - Could not find the correct provider in widgetFlutter - 在小部件中找不到正确的提供程序
【发布时间】：2021-11-19 09:17:28
【问题描述】：

我对 Flutter 很陌生，我尝试使用提供程序在列表中获取/添加设备。问题我在理解如何在我的组件中声明和使用它时仍然有点麻烦。

这是我的仪表板页面的代码，我在其中声明了要获取的提供程序和要添加的浮动按钮（目前是随机数据）：

import 'package:auth_app_v2/models/equipment.dart';
import 'package:auth_app_v2/models/user.dart';
import 'package:auth_app_v2/providers/auth_provider.dart';
import 'package:auth_app_v2/providers/equipment_provider.dart';
import 'package:auth_app_v2/providers/user_provider.dart';
import 'package:auth_app_v2/utility/shared_preferences.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class DashBoard extends StatefulWidget {
  @override
  _DashBoardState createState() => _DashBoardState();
}

class _DashBoardState extends State<DashBoard> {
  @override
  Widget build(BuildContext context) {
    User user = Provider.of<UserProvider>(context).user;
    Future<List<Map>> getEquipment() => EquipmentProvider().fetchEquipment();

    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => EquipmentProvider()),
      ],
      child: Scaffold(
        appBar: AppBar(
          title: Text("Dashboard"),
          elevation: 0.1,
          actions: <Widget>[
            Padding(
                padding: EdgeInsets.only(right: 20.0),
                child: GestureDetector(
                  onTap: () {
                    UserPreferences().removeUser();
                    Navigator.pushReplacementNamed(context, '/login');
                  },
                  child: Icon(
                    Icons.logout,
                    size: 26.0,
                  ),
                )),
          ],
        ),
        body: SingleChildScrollView(
          child: FutureBuilder(
              future: getEquipment(),
              builder: (context, AsyncSnapshot<List<Map>> snapshot) {
                var equips = snapshot.data != null
                    ? snapshot.data!.map((doc) => Equipment.fromMap(doc))
                    : [];
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: const [
                    SizedBox(
                      height: 100,
                    ),
                    // ListView.builder(
                    //   padding: EdgeInsets.all(8),
                    // itemCount: ,
                    //   itemBuilder: (BuildContext context, int index) {
                    //     return Text("Hi");
                    //   },
                    // )
                  ],
                );
              }),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<EquipmentProvider>(context, listen: false)
                .addEquipment();
          },
          child: const Icon(Icons.add_a_photo),
        ),
      ),
    );
  }
}

这里是我的 EquipmentProvider 的代码，这只是开始，我还没有实现所有的功能和状态。：

import 'dart:convert';

import 'package:auth_app_v2/models/equipment.dart';
import 'package:auth_app_v2/utility/equipment_storage.dart';
import 'package:flutter/cupertino.dart';

enum Status {
  loading,
  NotLoaded,
  Loaded,
}

class EquipmentProvider extends ChangeNotifier {
  late List<Equipment> equipments;

  Future<List<Map>> fetchEquipment() async {
    var result;
    return [];
  }

  Future<Equipment> getEquipmentById() async {
    var result;
    return result;
  }

  Future addEquipment() async {
    var json = [
      {"id": 1, "name": "Pompe 1"},
      {"id": 2, "name": "Pompe 2"}
    ];

    EquipmentStorage().writeEquipment(jsonEncode(json));
    return;
  }
}

问题出在浮动按钮上（暂时没有出现列表，我已经尝试使添加工作）。当我按下按钮时发生错误：


This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios :

我确定我在某个地方错过了一步，但尽管我进行了研究，但我还是找不到它......

谁能告诉我问题出在哪里并向我解释如何正确声明提供程序以正确使用它？

【问题讨论】：

标签： flutter flutter-provider

【解决方案1】：

简短的回答是：将 EquipmentProvider 的创建移到树中，因为您试图从 context 获取提供者并没有意识到这一点。

您的DashBoard 小部件包含一个Scaffold，所以我认为它是一个单独的页面。如果是，那么您可以在前一个屏幕中创建EquipmentProvider（指向DashBoard 的屏幕）。

【讨论】：