I try to display json as image. But instead image, it triggers error. I have tried to change the code but it didn't work.
class _MainPage extends State<MainPage> {
Future<List<Data>> _fetchData() async {
final jsondata =
await rootBundle.rootBundle.loadString('assets/datakomik.json');
final list = json.decode(jsondata)["data"] as List<dynamic>;
return list.map((e) => Data.fromJson(e)).toList();
}
Future<List<KomikModel>> _listKomik() async {
final jsongambar =
await rootBundle.rootBundle.loadString('assets/datakomik.json');
final list = json.decode(jsongambar)["image"] as List<dynamic>; <-- Error is in this line
return list.map((e) => KomikModel.fromJson(e)).toList();
}
Here is datakomik.json where I set the json. The data that I want to display is "judul" and "image" that contains title and picture of the comic. I only know that I can only set one data after (jsongambar), so I only set ["image"] after it. But it triggers an error like I've said.
{
"data": [
{
"kategori": "Update terbaru",
"data": [
{
"judul": "Jujutsu Kaisen",
"image": "images/Jujutsu Kaisen_Volume 1.webp"
},
{
"judul": "Vinland Saga",
"image": "images/Vinland Saga_volume 01.jpg"
},
{
"judul": "Hunter x Hunter",
"image": "images/HxH_Volume 10.jpg"
},
{
"judul": "One Piece",
"image": "images/One Piece_Volume 1.webp"
}
]
},
{
"kategori": "Action",
"data": [
{
"judul": "Bleach",
"image": "images/Bleach-volume-73.jpg"
},
{
"judul": "Naruto",
"image": "images/naruto_volume 63.jpg"
},
{
"judul": "Dragon Ball Super",
"image": "images/dragon-ball-super_volume 14.webp"
},
{
"judul": "Hunter x Hunter",
"image": "images/HxH_Volume 10.jpg"
},
{
"judul": "One Punch Man",
"image": "images/one punch man_volume 25.jpg"
},
{
"judul": "My Hero Academia",
"image": "images/My Hero Academia_volume 4.jpg"
}
]
},
{
"kategori": "Baru dibaca",
"data": [
{
"judul": "Kaguya-sama: Love is War",
"image": "images/kaguya-sama_Volume 22.jpg"
}
]
}
]
}
This is where I call _listKomik()
FutureBuilder<List<KomikModel>>(
future: _listKomik(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
}