flutter 当GET请求成功时,为什么我的API数据没有显示在列表视图中?

mnemlml8  于 2022-12-27  发布在  Flutter
关注(0)|答案(1)|浏览(264)

我是第一次使用flutter,但我不明白为什么我的数据不会显示。(物理)库及其当前占用情况。我已经正确地实现了一个API get请求,得到了终端输出的数据(打印),因此我知道我的API调用是工作的。我还使用我的数据模型将从JSON接收的数据实现为列表,然后我创建了一个带有库名和占用率的主体作为ListTile。在设备屏幕上编译时什么也不显示,只是一个空白屏幕,也没有循环进度指示器。
这里是我的主页:

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> {
  // Declare a list of Libraries
  List<Libraries> _libraries = [];

  @override
  void initState() {
    super.initState();
    // Call the getPosts function when the HomePage is initialized
    _getPosts();
  }

  // Function to make the GET request and store the response in a list of Libraries
  void _getPosts() async {
    var api = getDataAPI();
    var librariesJson = await api.getPosts();
    // Use the librariesFromJson function to convert the JSON string to a list of Libraries
    setState(() {
      _libraries = librariesFromJson(librariesJson!) as List<Libraries>;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Library Occupancy'),
      ),
      body: _libraries == null
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: _libraries.length,
              itemBuilder: (context, index) {
                // Display the library name and occupancy in a ListTile
                return ListTile(
                  title: Text(_libraries[index].webster.occupancy),
                  subtitle:
                      Text(_libraries[index].webster.lastRecordTime.toString()),
                );
              },
            ),
    );
  }
}

下面是我的API请求代码(remote_service.dart):

// 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<String?> getPosts() async {
    var credentials = '520:276377ba5206683e51d50fb86c378dc5';
// Encode the credentials in base64 format
    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 json = await response.stream.bytesToString();
      // ignore: await_only_futures
      Libraries library = await librariesFromJson(json);
      print("webster: " + library.webster.occupancy);
      return library.webster.occupancy;
    } else {
      print(response.statusCode);
    }
    return null;
  }
}

最后,这是我的JSON数据模型:

import 'dart:convert';

Libraries librariesFromJson(String str) => Libraries.fromJson(json.decode(str));
String librariesToJson(Libraries data) => json.encode(data.toJson());

class Libraries {
  Libraries({
    required this.webster,
    required this.vanier,
    required this.greyNuns,
  });

  GreyNuns webster;
  GreyNuns vanier;
  GreyNuns greyNuns;

  factory Libraries.fromJson(Map<String, dynamic> json) => Libraries(
        webster: GreyNuns.fromJson(json["Webster"]),
        vanier: GreyNuns.fromJson(json["Vanier"]),
        greyNuns: GreyNuns.fromJson(json["GreyNuns"]),
      );

  Map<String, dynamic> toJson() => {
        "Webster": webster.toJson(),
        "Vanier": vanier.toJson(),
        "GreyNuns": greyNuns.toJson(),
      };
}

class GreyNuns {
  GreyNuns({
    required this.occupancy,
    required this.lastRecordTime,
  });

  String occupancy;
  DateTime lastRecordTime;

  factory GreyNuns.fromJson(Map<String, dynamic> json) => GreyNuns(
        occupancy: json["Occupancy"],
        lastRecordTime: DateTime.parse(json["LastRecordTime"]),
      );

  Map<String, dynamic> toJson() => {
        "Occupancy": occupancy,
        "LastRecordTime": lastRecordTime.toIso8601String(),
      };
}

另外,当我运行这段代码时,终端输出如下:

Performing hot restart...                                               
Restarted application in 302ms.
flutter: webster: .0000
[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: FormatException: Unexpected character (at character 1)
.0000
^

#0      _ChunkedJsonParser.fail (dart:convert-patch/convert_patch.dart:1383:5)
#1      _ChunkedJsonParser.parseNumber (dart:convert-patch/convert_patch.dart:1250:9)
#2      _ChunkedJsonParser.parse (dart:convert-patch/convert_patch.dart:915:22)
#3      _parseJson (dart:convert-patch/convert_patch.dart:35:10)
#4      JsonDecoder.convert (dart:convert/json.dart:612:36)
#5      JsonCodec.decode (dart:convert/json.dart:216:41)
#6      librariesFromJson (package:xconcordia/models/post.dart:3:68)
#7      _HomePageState._getPosts.<anonymous closure> (package:xconcordia/views/home_page.dart:28:20)
#8      State.setState (package:flutter/src/widgets/framework.dart:1114:30)
#9      _HomePageState._getPosts (package:xconcordia/views/home_page.dart:27:5)
<asynchronous suspension>
aelbi1ox

aelbi1ox1#

Modify Your Model Class 

convert the data to  String in modal class :

  factory GreyNuns.fromJson(Map<String, dynamic> json) => GreyNuns(
        occupancy: json["Occupancy"].toString(),
        lastRecordTime: DateTime.parse(json["LastRecordTime"].toString()),
      );

相关问题