快照 returns 空

Question

我有一个名为 "ServiceModel" 的自定义数据模型，如下所示：


class ServiceModel {
  int status;
  String message;
  List<dynamic> errors;
  Data data;

  ServiceModel({
    required this.status,
    required this.message,
    required this.errors,
    required this.data,
  });

  factory ServiceModel.fromJson(Map<String, dynamic> json) => ServiceModel(
        status: json["status"],
        message: json["message"],
        errors: List<dynamic>.from(json["errors"].map((x) => x)),
        data: Data.fromJson(json["data"]),
      );

  Map<String, dynamic> toJson() => {
        "status": status,
        "message": message,
        "errors": List<dynamic>.from(errors.map((x) => x)),
        "data": data.toJson(),
      };
}

class Data {
  Data({
    required this.serviceInfo,
    required this.payInfo,
  });

  ServiceIfo serviceInfo;
  PayInfo payInfo;

  factory Data.fromJson(Map<String, dynamic> json) => Data(
        serviceInfo: ServiceIfo.fromJson(json["serviceIfo"]),
        payInfo: PayInfo.fromJson(json["payInfo"]),
      );

  Map<String, dynamic> toJson() => {
        "serviceInfo": serviceInfo.toJson(),
        "payInfo": payInfo.toJson(),
      };
}

而且我想通过此功能从我的 API 那里得到回复：

  Future<ServiceModel> getServiceDetail() async {
    var url = "${MyStrings.baseUrl}api/providers/profile/ServiceAPI";
    var _pref = await SharedPreferences.getInstance();
    var header = {
      'token': _pref.getString('token'),
    };
    var response = await http.get(url + '?serviceId=59', headers: header);
    print(response.body);
    var model = ServiceModel.fromJson((json.decode(response.body)));
    print("Model is : $model");
    return model;
  }

并用 FutureBuilder 显示如下：

FutureBuilder<ServiceModel>(
            future: _service.getServiceDetail(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                print('snapshot: ${snapshot.data}');
                return Center(
                  child: LinearProgressIndicator(
                    color: Colors.red,
                  ),
                );
              } else {
                return AnimatedSwitcher(
                    duration: const Duration(seconds: 1),
                    child: (snapshot.connectionState == ConnectionState.waiting)
                        ? Align(
                            alignment: Alignment.center,
                            child: Container(
                              child: CircularProgressIndicator(
                                color: parseColor("F8A387"),
                              ),
                            ))
                        : DetailedServicePager(data: snapshot.data!));
              }
            },
          )

这里一切似乎都很顺利，但行不通！！快照 returns null 并显示加载指示器。

事实上似乎一切都超过了模型行：

var model = ServiceModel.fromJson((json.decode(response.body)));

无效！！

我已经通过在 model definition 和 return model

之间放置 print("Model is : $model"); 来证明这一点

我应要求添加了邮递员回复的样本：

{
    "status": 200,
    "message": "Successful",
    "errors": [],
    "data": {
        "serviceIfo": {
            "serviceId": 59,
            "customerId": 3,
            "providerId": 4,
            "parentTitle": [],
            "title": "Cleaning",
            "price": 90000.0,
            "date": "2022/1/1",
            "time": "00:45",
            "address": "string",
            "specialDescription": [
                {
                    "question": "test",
                    "featureType": 0,
                    "choice": "test",
                    "answer": "test"
                }
            ],
            "description": "string",
            "lat": 0.0,
            "lng": 0.0,
            "customerFullName": "FirstName LastName",
            "custoemrPhoneNumber": "",
            "serviceStatus": "Abort Search",
            "endTime": "",
            "endDate": "",
            "serviceCategoryFeaturs": null
        },
        "payInfo": {
            "isPaied": false,
            "paymentAmount": 90000.0
        }
    }
}

Answer 1

因此，当我们在 Internet 上查找数据（获取数据）时，我们必须使用 异步（等待和异步）技术 来避免任何问题，因为数据需要一些时间是时候准备好在我们的小部件上显示或使用它了。

在你的情况下： 你发短信给快照并且：

如果它有数据，它将显示在 UI。
如果没有，您会看到 加载指示器，这就是问题所在！

您必须创建一个 return 语句，在加载数据时 return 加载指示器。

有关更多信息，请阅读这篇有用的文章 documentation and this model。

P.S: 此代码是在没有编辑器的情况下编写的，因此您可能会发现一些错误。

FutureBuilder<ServiceModel>(
        future: _service.getServiceDetail(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            print('snapshot error');
            
          } 
          if (snapshot.hasData) {
            return AnimatedSwitcher(
                duration: const Duration(seconds: 1),
                child: (snapshot.connectionState == ConnectionState.waiting)
                    ? Align(
                        alignment: Alignment.center,
                        child: Container(
                          child: CircularProgressIndicator(
                            color: parseColor("F8A387"),
                          ),
                        ))
                    : DetailedServicePager(data: snapshot.data!));
          }
          return Center(
              child: LinearProgressIndicator(
                color: Colors.red,
              ),
            );
        },
      )

Answer 2

所以我终于想通了！我的主要错误是 ServiceModel.

中的映射函数

response 很好。 response.body 有数据并且 Json.decode(response.body) return 编辑了一个合理的值然后 snapchat 是 NULL.

在 Json.decode 和 snapchat 之间唯一未选中的是 ServiceModel.fromJson((json.decode(response.body)))。

依次去掉ServiceModel、Data、ServiceInfo、PayInfo的各个字段；我设法找到了问题所在。这是因为我已经定义了一个 description 字段并且忘记在我的 fromJson(Map<String, dynamic> json) 中定义它。所以这个小问题导致映射出错，因为它已定义但未获得任何值并且它 returned null。

另一方面，似乎 flutter 决定 return null 作为整个答案，而不仅仅是可疑字段！

快照 returns 空

Snapshot returns Null

dart

dart-html

flutter

flutter-layout

flutter-web