Need help to parse json to flutter - flutter

Question

Hello guys i'm trying to learn flutter, and i want to display json information in the app, but i'm struggling to get some information.
This is what i currently have.
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:dio/dio.dart';
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Future<void> _getFutureDados() async {
Uri url = Uri.parse('https://fortnite-api.com/v2/shop/br');
Response response = await Dio().request(url.toString());
List<ItemLoja> itensLoja = List<ItemLoja>();
for (Map<String, dynamic> item in response.data['data']['featured']) {
itensLoja.add(ItemLoja.fromJson(item));
}
#override
void initState() {
super.initState();
_getFutureDados();
}
}
#override
Widget build(BuildContext context) {
_getFutureDados();
return Scaffold(
body: ListView.builder(
itemCount: response.data == null ? 0 : response.data.length,
itemBuilder: (context, index) {
final item = response.data[index];
Text(item.name);
},
));
}
}
class ItemLoja {
final String id;
final String name;
ItemLoja({
this.id,
this.name,
});
ItemLoja.fromJson(Map<String, dynamic> jsonData)
: id = jsonData['id'],
name = jsonData['name'];
}
I can manage to print the json in the terminal, but not in-app. It's not possible to do something like this with forEach?
In php, i can managed to do that and it was easy, getting the name by using ($item[name]) and then putting where i wanted it.
Thanks for any help.
Sorry for my english, but's not my main language.

Answer 1

You can copy paste run full code below
Step 1: You can use Payload.fromJson(response.data), see full code for detail
Step 2: Display with FutureBuilder and nested ListView
code snippet
Future<Payload> _getFutureDados() async {
Uri url = Uri.parse('https://fortnite-api.com/v2/shop/br');
Response response = await Dio().request(url.toString());
if (response.statusCode == 200) {
return Payload.fromJson(response.data);
} else {
throw Exception;
}
}
...
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
height: 10,
);
},
shrinkWrap: true,
itemCount: snapshot.data.data.featured.entries.length,
itemBuilder: (context, index) {
var entries = snapshot.data.data.featured.entries;
return Column(
children: [
Text("price ${entries[index].regularPrice.toString()}"),
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
working demo
full code
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
String payloadToJson(Payload data) => json.encode(data.toJson());
class Payload {
Payload({
this.status,
this.data,
});
int status;
Data data;
factory Payload.fromJson(Map<String, dynamic> json) => Payload(
status: json["status"],
data: Data.fromJson(json["data"]),
);
Map<String, dynamic> toJson() => {
"status": status,
"data": data.toJson(),
};
}
class Data {
Data({
this.hash,
this.date,
this.featured,
this.daily,
this.specialFeatured,
this.specialDaily,
this.votes,
this.voteWinners,
});
String hash;
DateTime date;
Daily featured;
Daily daily;
Daily specialFeatured;
dynamic specialDaily;
dynamic votes;
dynamic voteWinners;
factory Data.fromJson(Map<String, dynamic> json) => Data(
hash: json["hash"],
date: DateTime.parse(json["date"]),
featured: Daily.fromJson(json["featured"]),
daily: Daily.fromJson(json["daily"]),
specialFeatured: Daily.fromJson(json["specialFeatured"]),
specialDaily: json["specialDaily"],
votes: json["votes"],
voteWinners: json["voteWinners"],
);
Map<String, dynamic> toJson() => {
"hash": hash,
"date": date.toIso8601String(),
"featured": featured.toJson(),
"daily": daily.toJson(),
"specialFeatured": specialFeatured.toJson(),
"specialDaily": specialDaily,
"votes": votes,
"voteWinners": voteWinners,
};
}
class Daily {
Daily({
this.name,
this.entries,
});
String name;
List<Entry> entries;
factory Daily.fromJson(Map<String, dynamic> json) => Daily(
name: json["name"],
entries:
List<Entry>.from(json["entries"].map((x) => Entry.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"name": name,
"entries": List<dynamic>.from(entries.map((x) => x.toJson())),
};
}
class Entry {
Entry({
this.regularPrice,
this.finalPrice,
this.bundle,
this.banner,
this.giftable,
this.refundable,
this.sortPriority,
this.categories,
this.devName,
this.offerId,
this.displayAssetPath,
this.newDisplayAssetPath,
this.items,
});
int regularPrice;
int finalPrice;
dynamic bundle;
Banner banner;
bool giftable;
bool refundable;
int sortPriority;
List<String> categories;
String devName;
String offerId;
String displayAssetPath;
String newDisplayAssetPath;
List<ItemLoja> items;
factory Entry.fromJson(Map<String, dynamic> json) => Entry(
regularPrice: json["regularPrice"],
finalPrice: json["finalPrice"],
bundle: json["bundle"],
banner: json["banner"] == null ? null : Banner.fromJson(json["banner"]),
giftable: json["giftable"],
refundable: json["refundable"],
sortPriority: json["sortPriority"],
categories: List<String>.from(json["categories"].map((x) => x)),
devName: json["devName"],
offerId: json["offerId"],
displayAssetPath:
json["displayAssetPath"] == null ? null : json["displayAssetPath"],
newDisplayAssetPath: json["newDisplayAssetPath"] == null
? null
: json["newDisplayAssetPath"],
items:
List<ItemLoja>.from(json["items"].map((x) => ItemLoja.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"regularPrice": regularPrice,
"finalPrice": finalPrice,
"bundle": bundle,
"banner": banner == null ? null : banner.toJson(),
"giftable": giftable,
"refundable": refundable,
"sortPriority": sortPriority,
"categories": List<dynamic>.from(categories.map((x) => x)),
"devName": devName,
"offerId": offerId,
"displayAssetPath": displayAssetPath == null ? null : displayAssetPath,
"newDisplayAssetPath":
newDisplayAssetPath == null ? null : newDisplayAssetPath,
"items": List<dynamic>.from(items.map((x) => x.toJson())),
};
}
class Banner {
Banner({
this.value,
this.backendValue,
});
String value;
String backendValue;
factory Banner.fromJson(Map<String, dynamic> json) => Banner(
value: json["value"],
backendValue: json["backendValue"],
);
Map<String, dynamic> toJson() => {
"value": value,
"backendValue": backendValue,
};
}
class ItemLoja {
ItemLoja({
this.id,
this.name,
this.description,
this.type,
this.rarity,
this.series,
this.itemSet,
this.introduction,
this.images,
this.variants,
this.gameplayTags,
this.showcaseVideo,
this.displayAssetPath,
this.definitionPath,
this.path,
this.added,
this.shopHistory,
});
String id;
String name;
String description;
Rarity type;
Rarity rarity;
Series series;
Set itemSet;
Introduction introduction;
Images images;
List<Variant> variants;
List<String> gameplayTags;
String showcaseVideo;
String displayAssetPath;
String definitionPath;
String path;
DateTime added;
List<DateTime> shopHistory;
factory ItemLoja.fromJson(Map<String, dynamic> json) => ItemLoja(
id: json["id"],
name: json["name"],
description: json["description"],
type: Rarity.fromJson(json["type"]),
rarity: Rarity.fromJson(json["rarity"]),
series: json["series"] == null ? null : Series.fromJson(json["series"]),
itemSet: json["set"] == null ? null : Set.fromJson(json["set"]),
introduction: Introduction.fromJson(json["introduction"]),
images: Images.fromJson(json["images"]),
variants: json["variants"] == null
? null
: List<Variant>.from(
json["variants"].map((x) => Variant.fromJson(x))),
gameplayTags: List<String>.from(json["gameplayTags"].map((x) => x)),
showcaseVideo:
json["showcaseVideo"] == null ? null : json["showcaseVideo"],
displayAssetPath:
json["displayAssetPath"] == null ? null : json["displayAssetPath"],
definitionPath:
json["definitionPath"] == null ? null : json["definitionPath"],
path: json["path"],
added: DateTime.parse(json["added"]),
shopHistory: List<DateTime>.from(
json["shopHistory"].map((x) => DateTime.parse(x))),
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"description": description,
"type": type.toJson(),
"rarity": rarity.toJson(),
"series": series == null ? null : series.toJson(),
"set": itemSet == null ? null : itemSet.toJson(),
"introduction": introduction.toJson(),
"images": images.toJson(),
"variants": variants == null
? null
: List<dynamic>.from(variants.map((x) => x.toJson())),
"gameplayTags": List<dynamic>.from(gameplayTags.map((x) => x)),
"showcaseVideo": showcaseVideo == null ? null : showcaseVideo,
"displayAssetPath": displayAssetPath == null ? null : displayAssetPath,
"definitionPath": definitionPath == null ? null : definitionPath,
"path": path,
"added": added.toIso8601String(),
"shopHistory":
List<dynamic>.from(shopHistory.map((x) => x.toIso8601String())),
};
}
class Images {
Images({
this.smallIcon,
this.icon,
this.featured,
this.other,
});
String smallIcon;
String icon;
String featured;
dynamic other;
factory Images.fromJson(Map<String, dynamic> json) => Images(
smallIcon: json["smallIcon"],
icon: json["icon"],
featured: json["featured"] == null ? null : json["featured"],
other: json["other"],
);
Map<String, dynamic> toJson() => {
"smallIcon": smallIcon,
"icon": icon,
"featured": featured == null ? null : featured,
"other": other,
};
}
class Introduction {
Introduction({
this.chapter,
this.season,
this.text,
this.backendValue,
});
String chapter;
String season;
TextEnum text;
int backendValue;
factory Introduction.fromJson(Map<String, dynamic> json) => Introduction(
chapter: json["chapter"],
season: json["season"],
text: textValues.map[json["text"]],
backendValue: json["backendValue"],
);
Map<String, dynamic> toJson() => {
"chapter": chapter,
"season": season,
"text": textValues.reverse[text],
"backendValue": backendValue,
};
}
enum TextEnum {
INTRODUCED_IN_CHAPTER_1_SEASON_5,
INTRODUCED_IN_CHAPTER_2_SEASON_2,
INTRODUCED_IN_CHAPTER_2_SEASON_4,
INTRODUCED_IN_CHAPTER_1_SEASON_6,
INTRODUCED_IN_CHAPTER_1_SEASON_9,
INTRODUCED_IN_CHAPTER_2_SEASON_3,
INTRODUCED_IN_CHAPTER_2_SEASON_1
}
final textValues = EnumValues({
"Introduced in Chapter 1, Season 5.":
TextEnum.INTRODUCED_IN_CHAPTER_1_SEASON_5,
"Introduced in Chapter 1, Season 6.":
TextEnum.INTRODUCED_IN_CHAPTER_1_SEASON_6,
"Introduced in Chapter 1, Season 9.":
TextEnum.INTRODUCED_IN_CHAPTER_1_SEASON_9,
"Introduced in Chapter 2, Season 1.":
TextEnum.INTRODUCED_IN_CHAPTER_2_SEASON_1,
"Introduced in Chapter 2, Season 2.":
TextEnum.INTRODUCED_IN_CHAPTER_2_SEASON_2,
"Introduced in Chapter 2, Season 3.":
TextEnum.INTRODUCED_IN_CHAPTER_2_SEASON_3,
"Introduced in Chapter 2, Season 4.":
TextEnum.INTRODUCED_IN_CHAPTER_2_SEASON_4
});
class Set {
Set({
this.value,
this.text,
this.backendValue,
});
String value;
String text;
String backendValue;
factory Set.fromJson(Map<String, dynamic> json) => Set(
value: json["value"],
text: json["text"],
backendValue: json["backendValue"],
);
Map<String, dynamic> toJson() => {
"value": value,
"text": text,
"backendValue": backendValue,
};
}
class Rarity {
Rarity({
this.value,
this.displayValue,
this.backendValue,
});
String value;
String displayValue;
BackendValue backendValue;
factory Rarity.fromJson(Map<String, dynamic> json) => Rarity(
value: json["value"],
displayValue: json["displayValue"],
backendValue: backendValueValues.map[json["backendValue"]],
);
Map<String, dynamic> toJson() => {
"value": value,
"displayValue": displayValue,
"backendValue": backendValueValues.reverse[backendValue],
};
}
enum BackendValue {
E_FORT_RARITY_LEGENDARY,
E_FORT_RARITY_RARE,
E_FORT_RARITY_UNCOMMON,
ATHENA_CHARACTER,
ATHENA_BACKPACK,
ATHENA_DANCE,
ATHENA_ITEM_WRAP,
E_FORT_RARITY_EPIC,
ATHENA_PICKAXE,
ATHENA_GLIDER
}
final backendValueValues = EnumValues({
"AthenaBackpack": BackendValue.ATHENA_BACKPACK,
"AthenaCharacter": BackendValue.ATHENA_CHARACTER,
"AthenaDance": BackendValue.ATHENA_DANCE,
"AthenaGlider": BackendValue.ATHENA_GLIDER,
"AthenaItemWrap": BackendValue.ATHENA_ITEM_WRAP,
"AthenaPickaxe": BackendValue.ATHENA_PICKAXE,
"EFortRarity::Epic": BackendValue.E_FORT_RARITY_EPIC,
"EFortRarity::Legendary": BackendValue.E_FORT_RARITY_LEGENDARY,
"EFortRarity::Rare": BackendValue.E_FORT_RARITY_RARE,
"EFortRarity::Uncommon": BackendValue.E_FORT_RARITY_UNCOMMON
});
class Series {
Series({
this.value,
this.image,
this.backendValue,
});
String value;
String image;
String backendValue;
factory Series.fromJson(Map<String, dynamic> json) => Series(
value: json["value"],
image: json["image"],
backendValue: json["backendValue"],
);
Map<String, dynamic> toJson() => {
"value": value,
"image": image,
"backendValue": backendValue,
};
}
class Variant {
Variant({
this.channel,
this.type,
this.options,
});
String channel;
String type;
List<Option> options;
factory Variant.fromJson(Map<String, dynamic> json) => Variant(
channel: json["channel"],
type: json["type"],
options:
List<Option>.from(json["options"].map((x) => Option.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"channel": channel,
"type": type,
"options": List<dynamic>.from(options.map((x) => x.toJson())),
};
}
class Option {
Option({
this.tag,
this.name,
this.unlockRequirements,
this.image,
});
String tag;
String name;
dynamic unlockRequirements;
String image;
factory Option.fromJson(Map<String, dynamic> json) => Option(
tag: json["tag"],
name: json["name"],
unlockRequirements: json["unlockRequirements"],
image: json["image"],
);
Map<String, dynamic> toJson() => {
"tag": tag,
"name": name,
"unlockRequirements": unlockRequirements,
"image": image,
};
}
class EnumValues<T> {
Map<String, T> map;
Map<T, String> reverseMap;
EnumValues(this.map);
Map<T, String> get reverse {
if (reverseMap == null) {
reverseMap = map.map((k, v) => new MapEntry(v, k));
}
return reverseMap;
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<Payload> _future;
Future<Payload> _getFutureDados() async {
Uri url = Uri.parse('https://fortnite-api.com/v2/shop/br');
Response response = await Dio().request(url.toString());
if (response.statusCode == 200) {
return Payload.fromJson(response.data);
} else {
throw Exception;
}
}
#override
void initState() {
_future = _getFutureDados();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder(
future: _future,
builder: (context, AsyncSnapshot<Payload> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('none');
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (snapshot.hasError) {
return Text(
'${snapshot.error}',
style: TextStyle(color: Colors.red),
);
} else {
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
height: 10,
);
},
shrinkWrap: true,
itemCount: snapshot.data.data.featured.entries.length,
itemBuilder: (context, index) {
var entries = snapshot.data.data.featured.entries;
return Column(
children: [
Text("price ${entries[index].regularPrice.toString()}"),
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: entries[index].items.length,
itemBuilder: (context, index1) {
return Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.only(
top: 6.0,
bottom: 6.0,
left: 8.0,
right: 8.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("name: ${entries[index].items[index1].name}"),
/* Spacer(),
Text(
"id ${entries[index].items[index1].id}",
),*/
],
),
));
}),
],
);
});
}
}
}));
}
}

Answer 2

I think you need to find some way to handle your request and show the results.
Your code needs some adjustments, but it's not that far from your goal.
One way to solve this is to use FutureBuilder.
In this case you can use the FutureBuider to show a Listview when the future request arrive.
Follow this tutorial, where they use the tools you need: Future Builder with List View Builder