JSON文字のダウンロードについて

ど素人丸出しの質問で申し訳ありませんが、下記についてご教授頂きたく質問させて頂きます。
宜しければご回答お願い致します。

前提・実現したいこと

最終的には以下のようにしたいと考えています。
1)メインとサブの2ページ構成にしたい
2)サブページに以下の機能を実装したい

・　HTTPレスポンスで拾ってきたJSON文字を元に、JSONの件数に従ってリストを作成
・　サブページに遷移すると作成した

【参考にしたWEBページ】　※下記ページ以外にも多数
https://qiita.com/yasutaka_ono/items/6d2a0d3b0856598f9788#6%E3%83%87%E3%83%BC%E3%82%BF%E5%A4%89%E6%8F%9Bjson-map-and-list

https://algorithm.joho.info/flutter/load-json-dart/#toc1

発生している問題・エラーメッセージ

「指定しているデータ形式と実際受け取ったデータ形式の相違」が原因なのは理解していますが
結局どのようにすればいいのかが全く分からず困っています。

↓「Map data = [] as Map;」の時のエラー

The following TypeErrorImpl was thrown building Builder:
Expected a value of type 'Map<dynamic, dynamic>', but got one of type 'List<dynamic>'

↓「List data = [];」の時のエラー
→ 2:[] が先に来ている辺りに原因があるんだろうなと思いつつ対処方法がわからず

2:[]
1:{
  "userID": 1001,
  "date": "2021/07/11"
}
Error: Expected a value of type 'List<dynamic>', but got one of type '_JsonMap'

該当のソースコード

モックアップはjson-server(node.js)を使用しています。

{"profile":{"userID":1001,"date":"2021/07/11"}}

curlおよびブラウザからはちゃんと表示されます

user@macbook ~ % curl -X GET http://testserver:3000/profile
{
  "ID": 1001,
  "date": "2021/07/20"
}%

Flutterのソースは下記です
（※ウィジェット周りは別のエラーが発生するので一旦省いています)

class _TestState extends State<TestPage> {
  Map data = [] as Map;
  // List data = [];

  Future getData() async {
    http.Response res = await http.get(
        Uri.parse("http://testserver:3000/profile"),
        headers: {'Content-Type': 'application/json; charset=utf-8'});
    print("1:"+res.body);

    setState(() {
      data = json.decode(res.body);
    });
  }

  @override
  Widget build(BuildContext context) {
    print("2:"+data.toString());
    return Scaffold(
        appBar: AppBar(title: Text('')),
        body: Center(child: Text("")));
  }
}

試したこと

・　とりあえずネット検索で同様事象の質問サイト(海外含め)を参照
→WEBページ記載の改善例を参考に試すも改善せず

・　JSON-Server側(jsonの構文)チェックなど実施
→構文エラーなし、改善みられず

行動規範の内容に同意します

回答1件

ベストアンサー

書くとくそ長くなるんですが、
まずはmodel classを作りましょう！

profile_info.dart

dart
1import 'dart:convert';
2
3ProfileInfo profileInfoFromJson(String str) => ProfileInfo.fromJson(json.decode(str));
4
5String profileInfoToJson(ProfileInfo data) => json.encode(data.toJson());
6
7class ProfileInfo {
8    ProfileInfo({
9        this.profile,
10    });
11
12    Profile profile;
13
14    factory ProfileInfo.fromJson(Map<String, dynamic> json) => ProfileInfo(
15        profile: Profile.fromJson(json["profile"]),
16    );
17
18    Map<String, dynamic> toJson() => {
19        "profile": profile.toJson(),
20    };
21}
22
23class Profile {
24    Profile({
25        this.userId,
26        this.date,
27    });
28
29    int userId;
30    String date;
31
32    factory Profile.fromJson(Map<String, dynamic> json) => Profile(
33        userId: json["userID"],
34        date: json["date"],
35    );
36
37    Map<String, dynamic> toJson() => {
38        "userID": userId,
39        "date": date,
40    };
41}

で、serviceクラスを作ります（APIリクエスト）。
service.dart

dart
1import 'package:http/http.dart' as http;//必要がなかったら消してね
2import 'package:http/http.dart'; //必要がなかったら消してね
3class Services{
4  static Future<ProfileInfo> getProfileInfo() async{
5    
6    Response response = await http.get(
7        Uri.parse("http://testserver:3000/profile"),
8        headers: {'Content-Type': 'application/json; charset=utf-8'});
9　　　　　　　　//↑ちょっと自信ない
10    print(response.body);
11    ProfileInfo profileInfo = profileInfoToJson(response.body);
12    return profileInfo;
13  }
14}

で、表示させたいページで
hogehoge.dart

dart
1//ステイトフルwidgetを使っています。
2  ProfileInfo　_profileInfo;
3  Profile _profile;
4  Bool _loading;
5
6  @override
7  void initState(){
8    super.initState();
9    _loading = true;
10    _loadProfile();
11  }
12
13  _loadProfile() async{
14    _profileInfo = await Services.getProfileInfo();
15    _profile = _profileInfo.profile
16    //↑もしかしたら_profile = _profileInfo.profile[0]かも
17    setState(() {
18      _loading = false;
19    });
20  }
21
22  @override
23  Widget build(BuildContext context) {
24  //ここで好きな様に、呼び出して下さい。例
25　　　　　return _loading
26     :CircularProgressIndicator()
27     ?Column(
28       children[
29         Text(_profile.userId.toString()),
30         Text(_profile.date),
31       ]
32     ) 
33  }