Flutter中API请求成功但列表视图不显示数据问题排查

问题现象 #

首次开发Flutter应用，调用获取图书馆占用率的API时，终端能打印数据，但设备屏幕显示空白，无加载指示器，同时抛出FormatException错误。

核心错误分析 #

从日志和代码中可定位三个关键问题：

1. API服务返回数据错误：remote_service.dart中getPosts方法仅返回单个图书馆的occupancy字符串（如.0000），而非完整的API响应JSON，导致后续调用librariesFromJson解析完整模型时失败。
2. 加载状态判断失效：HomePage中_libraries初始化为空列表[]，而非null，因此_libraries == null永远为false，加载指示器CircularProgressIndicator从未触发，直接显示长度为0的空列表。
3. 数据类型不匹配：API返回的是单个Libraries对象（包含三个图书馆数据），但HomePage中用List<Libraries>存储，类型不匹配导致无法正确渲染。

修复步骤 #

1. 修正API服务，返回完整数据 #

修改remote_service.dart，让getPosts返回解析好的Libraries对象，而非单个字符串：

// ignore_for_file: camel_case_types
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:xconcordia/models/post.dart';

class getDataAPI {
  Future<Libraries?> getPosts() async {
    var credentials = '520:276377ba5206683e51d50fb86c378dc5';
    var base64Credentials = base64Encode(utf8.encode(credentials));

    var headers = {'Authorization': 'Basic $base64Credentials'};

    var request = http.Request('GET',
        Uri.parse('https://opendata.concordia.ca/API/v1/library/occupancy/'));
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      String jsonStr = await response.stream.bytesToString();
      Libraries library = librariesFromJson(jsonStr);
      print("webster: " + library.webster.occupancy);
      return library;
    } else {
      print(response.statusCode);
      return null;
    }
  }
}

2. 修正HomePage的状态管理与列表渲染 #

将_libraries改为可空的Libraries?类型，修复加载状态判断，并将单个Libraries对象中的三个图书馆转为列表渲染：

import 'package:flutter/material.dart';

import '../models/post.dart';
import '../services/remote_service.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Libraries? _libraryData;

  @override
  void initState() {
    super.initState();
    _getPosts();
  }

  void _getPosts() async {
    var api = getDataAPI();
    var libraryData = await api.getPosts();
    setState(() {
      _libraryData = libraryData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Library Occupancy'),
      ),
      body: _libraryData == null
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : ListView(
              children: [
                ListTile(
                  title: const Text('Webster Library'),
                  subtitle: Text('Occupancy: ${_libraryData!.webster.occupancy}'),
                  trailing: Text('Updated: ${_libraryData!.webster.lastRecordTime.toString().split(' ')[0]}'),
                ),
                ListTile(
                  title: const Text('Vanier Library'),
                  subtitle: Text('Occupancy: ${_libraryData!.vanier.occupancy}'),
                  trailing: Text('Updated: ${_libraryData!.vanier.lastRecordTime.toString().split(' ')[0]}'),
                ),
                ListTile(
                  title: const Text('GreyNuns Library'),
                  subtitle: Text('Occupancy: ${_libraryData!.greyNuns.occupancy}'),
                  trailing: Text('Updated: ${_libraryData!.greyNuns.lastRecordTime.toString().split(' ')[0]}'),
                ),
              ],
            ),
    );
  }
}

3. 修正数据模型中的异步错误 #

移除remote_service.dart中多余的await（librariesFromJson是同步方法，不需要await），原代码中的// ignore: await_only_futures注释也可删除。

修复后效果 #

• 加载过程中显示圆形加载指示器
• API数据返回后，正确展示三个图书馆的名称、占用率和更新时间
• 不再抛出FormatException错误

内容的提问来源于stack exchange，提问作者Usama Saleem