[flutter][map] 値がリスト型であるときの、値の取り出しがうまくいかない。

Question

前提・実現したいこと

jsonのデータを読み取る練習をしております。
今回は、一つ目のリストに<猫><コアラ>。
二つ目のリストに<たぬき><犬>というタグが表示されるようにしたいと考えています。

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

List dynamic is not a subtype of type 'String'

記述

test.jsonでの記述です。

[
    {
        "hoge": ["猫","コアラ"],
        "people":  "田中"
    },
    {
        "hoge": ["たぬき","犬"],
        "people":  "斎藤"
    }
]

favorite_page.dartでの記述です。runApp(MyApp());とかの記述は、main.dartにしました

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tags/flutter_tags.dart';
import 'package:flutter/services.dart' show rootBundle;

class FavoritePage extends StatefulWidget {
  @override
  _FavoritePageState createState() => _FavoritePageState();
}

class _FavoritePageState extends State<FavoritePage> {

  List<dynamic> testJsonList = [];

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

  Future<void> loadJsonAsset() async {
    String loadData = await rootBundle.loadString('assets/jsons/test.json');
    testJsonList = jsonDecode(loadData);

    if(mounted) {
      setState(() => testJsonList = jsonDecode(loadData));
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Colors.black38),
                ),
              ),
              child: ListTile(
                title: Tags(
                  itemCount: testJsonList.length,
                  itemBuilder: (int index){
                    return ItemTags(
                          index: index,
                          title:testJsonList[index]['hoge'],
                        );
                  },
                ),
              ));
        }, itemCount: testJsonList.length,
      ),
    );
  }
}

試したこと

test.jsonからデータを読み取れているか確認するために、

 title:Text(testJsonList[0]['people'])

と記述してみたところ、"田中"と出てきたので、読み取り自体に問題はなさそうです。
title:testJsonList[index]['hoge[index]']とかもやってみましたが、全然違うようでした…
おそらく、型で何らかのミスをしているんだなと考えています。
分かる方、ご回答よろしくお願いします(^^)

Answer 1

型というよりは、JSONの参照方法が適切ではないと思います。各処理でprint()して内容を確認してみると理解しやすいと思います。

以下のようにすればうまくいくと思います

                title: Tags(
                  itemCount: testJsonList[index]['hoge'].length,
                  itemBuilder: (int hogeindex) {
                    return ItemTags(
                      index: hogeindex,
                      title: testJsonList[index]['hoge'][hogeindex],
                    );
                  },
                ),

---

一応動作確認した完全なコードも載せておきます

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter_tags/flutter_tags.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: FavoritePage(),
    );
  }
}

class FavoritePage extends StatefulWidget {
  @override
  _FavoritePageState createState() => _FavoritePageState();
}

class _FavoritePageState extends State<FavoritePage> {
  List<dynamic> testJsonList = [];

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

  Future<void> loadJsonAsset() async {
    String loadData = await rootBundle.loadString('assets/jsons/test.json');
    testJsonList = jsonDecode(loadData);

    if (mounted) {
      setState(() => testJsonList = jsonDecode(loadData));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Colors.black38),
                ),
              ),
              child: ListTile(
                title: Tags(
                  itemCount: testJsonList[index]['hoge'].length,
                  itemBuilder: (int hogeindex) {
                    return ItemTags(
                      index: hogeindex,
                      title: testJsonList[index]['hoge'][hogeindex],
                    );
                  },
                ),
              ));
        },
        itemCount: testJsonList.length,
      ),
    );
  }
}

Comments

[flutter_labo]

めちゃくちゃ分かり易かったです！！
毎度毎度本当にありがとうございます…。

print()して、内容を確認してみる癖を付けたいと思います。