Flutter应用无法识别模型文件数据，请求排查错误原因

问题描述 #

Flutter应用调用API后无法正确解析模型文件中的数据，运行时出现错误，错误截图如下：

模型文件代码 #

// To parse this JSON data, do
//
//     final hisselist = hisselistFromJson(jsonString);

import 'dart:convert';

Hisselist hisselistFromJson(String str) => Hisselist.fromJson(json.decode(str));

String hisselistToJson(Hisselist data) => json.encode(data.toJson());

class Hisselist {
  Hisselist({
    required this.success,
    required this.result,
  });

  bool success;
  List<dynamic> result;

  factory Hisselist.fromJson(Map<String, dynamic> json) => Hisselist(
    success: json["success"],
    result: List<dynamic>.from(json["result"].map((x) => x)),
  );

  Map<String, dynamic> toJson() => {
    "success": success,
    "result": List<dynamic>.from(result.map((x) => x)),
  };
}

class ResultClass {
  ResultClass({
    required this.rate,
    required this.lastprice,
    required this.lastpricestr,
    required this.hacim,
    required this.hacimstr,
    required this.text,
    required this.code,
  });

  double rate;
  double lastprice;
  String lastpricestr;
  double hacim;
  String hacimstr;
  String text;
  String code;

  factory ResultClass.fromJson(Map<String, dynamic> json) => ResultClass(
    rate: json["rate"].toDouble(),
    lastprice: json["lastprice"].toDouble(),
    lastpricestr: json["lastpricestr"],
    hacim: json["hacim"].toDouble(),
    hacimstr: json["hacimstr"],
    text: json["text"],
    code: json["code"],
  );

  Map<String, dynamic> toJson() => {
    "rate": rate,
    "lastprice": lastprice,
    "lastpricestr": lastpricestr,
    "hacim": hacim,
    "hacimstr": hacimstr,
    "text": text,
    "code": code,
  };
}

API调用页面代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:easy_localization/easy_localization.dart';

import '../models/apis/hisselist.dart';

class Stocks extends StatefulWidget {
  Stocks({Key? key}) : super(key: key);

  @override
  _StocksState createState() => _StocksState();
}

class _StocksState extends State<Stocks> with AutomaticKeepAliveClientMixin {
  ScrollController? controller;
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final url = Uri.parse('https://api.collectapi.com/economy/hisseSenedi');
  var counter;
  var hisseResult;
  
  Future callHisse() async {
    try{
      Map<String, String> requestHeaders = {
        'Content-Type': 'application/json',
        'Authorization': 'apikey xxx'
      };
      final response = await http.get(url,headers:requestHeaders);

      if(response.statusCode == 200){
        var result = hisselistFromJson(response.body);
        if(mounted);
        setState(() {
          counter = 200;
          hisseResult = result;
        });
        return result;
      } else {
        print(response.statusCode);
      }
    } catch(e) {
      print(e.toString());
    }
  }
  
  @override
  void initState() {
    super.initState();
    callHisse();
  }
  
  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        automaticallyImplyLeading: false,
        title: Text('Hisseler').tr(),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: counter != null ?
          ListView.builder(
              itemCount: counter,
              itemBuilder: (context, index){
                return Card(
                  child: ListTile(
                    title: Text(hisseResult.data[index].code),
                    subtitle: Text(hisseResult.data[index].text),
                  ),
                );
          }) : Center(child: CircularProgressIndicator()),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

问题排查与修复方案 #

1. 模型类字段与调用时的字段不匹配 #

Hisselist类中存储数据的字段是result，但API调用页面中错误使用了hisseResult.data[index]，需改为hisseResult.result[index]。

2. 模型类result列表类型未明确指定 #

当前Hisselist中的result为List<dynamic>，无法正确解析为ResultClass对象，需修改为List<ResultClass>并调整解析逻辑：

class Hisselist {
  Hisselist({
    required this.success,
    required this.result,
  });

  bool success;
  List<ResultClass> result; // 替换dynamic为ResultClass

  factory Hisselist.fromJson(Map<String, dynamic> json) => Hisselist(
    success: json["success"],
    // 解析时转换为ResultClass实例
    result: List<ResultClass>.from(json["result"].map((x) => ResultClass.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "success": success,
    "result": List<dynamic>.from(result.map((x) => x.toJson())),
  };
}

3. 硬编码列表长度不合理 #

API返回的result列表长度并非固定200，需用实际列表长度作为ListView.builder的itemCount，避免数组越界：

setState(() {
  counter = result.result.length; // 替换200为实际列表长度
  hisseResult = result;
});

4. 调用时字段名错误修正 #

在ListView.builder的itemBuilder中，修正字段访问路径：

title: Text(hisseResult.result[index].code),
subtitle: Text(hisseResult.result[index].text),

5. 空安全优化（可选） #

直接用hisseResult的存在状态判断加载状态，去掉冗余的counter变量：

child: hisseResult != null ?
  ListView.builder(
      itemCount: hisseResult.result.length,
      itemBuilder: (context, index){
        final item = hisseResult.result[index];
        return Card(
          child: ListTile(
            title: Text(item.code),
            subtitle: Text(item.text),
          ),
        );
  }) : Center(child: CircularProgressIndicator()),

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak