I want to Show Complex JSON Data in Flutter But Getting Nothing - flutter

Question

I am trying to show the JSON data from a URL to my Flutter application and haven't found any solution yet.
How to show this data in the ListView in Flutter?
Here is my complete Flutter project code:
Main.dart
import 'package:flutter/material.dart';
import 'package:jsontest/Json.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Cricket',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: new JsonParseDemo(),
);
}
}
Match.dart Where Json Data is in organized form
import 'dart: convert';
Match matchesFromJson(String str) => Match.fromJson(json.decode(str));
String matchesToJson(Match data) => json.encode(data.toJson());
class Match {
Match({
this.name,
this.status,
});
String name;
String status;
factory Match.fromJson(Map<String, dynamic> json) => Match(
name: json["name"],
status: json["status"],
);
Map<String, dynamic> toJson() => {
"name": name,
"status": status,
};
}
Service.dart Here is the base URL to get JSON data
import 'package:http/http.dart' as http;
import 'Users.dart';
class Services {
//
static const String url = 'https://api.cricket.com.au/matches';
static Future<List<Match>> getMatches() async{
try{
final response = await http.get(url);
if (200 == response.statusCode){
final List<Match> match = matchesFromJson(response.body) as List<Match>;
return match;
}
else{
return List<Match>();
}
}
catch(e){
return List<Match>();
}
}
}
And here is the code of my main class where I want to show the data.
JsonParser.dart
import 'package:flutter/material.dart';
import 'Services.dart';
import 'Users.dart';
class JsonParseDemo extends StatefulWidget {
//
JsonParseDemo() : super();
#override
_JsonParseDemoState createState() => _JsonParseDemoState();
}
class _JsonParseDemoState extends State<JsonParseDemo> {
//
List<Match> _match;
bool _loading;
#override
void initState() {
super.initState();
_loading = true;
Services.getMatches().then((matches) {
setState(() {
_loading = false;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_loading ? 'Loading...' : 'Matches'),
),
body: Container(
color: Colors.white,
child: ListView.builder(
itemCount: null == _match ? 0 : _match.length,
itemBuilder: (context, index) {
Match match = _match[index];
return ListTile(
title: Text(match.name),
subtitle: Text(match.status),
);
},
),
),
);
}
}
How to get "Name and Status" of the match from this JSON?

Answer 1

Try my code below :
json_parse_demo_screen.dart
class JsonParseDemo extends StatefulWidget {
//
JsonParseDemo() : super();
#override
_JsonParseDemoState createState() => _JsonParseDemoState();
}
class _JsonParseDemoState extends State<JsonParseDemo> {
//
List<Match> _match;
bool _loading = true;
#override
void initState() {
super.initState();
_loading = true;
Services.getMatches().then((matches) {
setState(() {
_match = matches;
_loading = false;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_loading ? 'Loading...' : 'Matches'),
),
body: Container(
color: Colors.white,
child: ListView.builder(
itemCount: null == _match ? 0 : _match.length,
itemBuilder: (context, index) {
Match match = _match[index];
return ListTile(
title: Text(match.name),
subtitle: Text(match.status),
);
},
),
),
);
}
}
match.dart
import 'dart:convert';
String matchesToJson(Match data) => json.encode(data.toJson());
class Match {
Match({
this.name,
this.status,
});
String name;
String status;
factory Match.fromJson(Map<String, dynamic> json) => Match(
name: json["name"],
status: json["status"],
);
Map<String, dynamic> toJson() => {
"name": name,
"status": status,
};
}
service.dart
Here, you will have to check the hierarchy of the response you get.
The hierarchy of response is:
- meta
- matchList
- matches
Then you have to look for the result you expect (here matches)
class Services {
//
static const String url = 'https://api.cricket.com.au/matches';
static Future<List<Match>> getMatches() async{
try{
final response = await http.get(url);
final responseFormatted = json.decode(response.body);
final matches = responseFormatted["matchList"]["matches"];
if (200 == response.statusCode){
final List<Match> match = matches.map<Match>((item) => Match.fromJson(item)).toList();
return match;
}
else{
return List<Match>();
}
}
catch(e){
return List<Match>();
}
}
}
Output

Answer 2

You didn't initialize match
List<Match> _match;
You can do it like this
Services.getMatches().then((matches) {
setState(() {
_match=matches
_loading = false;
});
});