Unable to display the parsed JSON in Future Builder in flutter - json

Question

I was trying to fetch data results from a REST API and then display it in the UI.
So everything went well the JSON was parsed well the try and catch method was working fine.
But somehow the code was not able to display the parsed results in the UI.
Neither it gave me an error or exception.
I have been struggling to attain the desired result for quite the past few days.
This is how the JSON looks like:
{
"data-description": "This api will return an array of objects to be placed in the order status timeline on the second screen",
"order-status": "Success",
"status-objects": [
{
"type": "Payment",
"status": "completed",
"date": "2021-07-02T00:00:00",
"time": "12:00AM"
},
{
"type": "Units Allocated",
"status": "by Axis",
"date": "2021-07-13T00:00:00",
"time": "12:00AM"
}
]
}
What type of UI I want to achieve after doing this.
In order to make the problem more clearly, I will be attaching my code snippets.
Model Class
Transaction transactionFromJson(String str) =>
Transaction.fromJson(json.decode(str));
String transactionToJson(Transaction data) => json.encode(data.toJson());
class Transaction {
Transaction({
required this.dataDescription,
required this.orderStatus,
required this.statusObjects,
});
String dataDescription;
String orderStatus;
List<StatusObject> statusObjects;
factory Transaction.fromJson(Map<String, dynamic> json) => Transaction(
dataDescription: json["data-description"],
orderStatus: json["order-status"],
statusObjects: List<StatusObject>.from(
json["status-objects"].map((x) => StatusObject.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"data-description": dataDescription,
"order-status": orderStatus,
"status-objects":
List<dynamic>.from(statusObjects.map((x) => x.toJson())),
};
}
class StatusObject {
StatusObject({
required this.type,
required this.status,
required this.date,
required this.time,
});
String type;
String status;
DateTime date;
String time;
factory StatusObject.fromJson(Map<String, dynamic> json) => StatusObject(
type: json["type"],
status: json["status"],
date: DateTime.parse(json["date"]),
time: json["time"],
);
Map<String, dynamic> toJson() => {
"type": type,
"status": status,
"date": date.toIso8601String(),
"time": time,
};
}
API_Manager where the parsing and fetching took place
Service Class
class API_Manager {
static Future<Transaction> getDetails() async {
var client = http.Client();
var transactions;
try {
var response = await client.get(
Uri.https("https://hereistheurl", "/accounts/test-data/"));
if (response.statusCode == 200) {
var jsonString = response.body;
var jsonMap = jsonDecode(jsonString);
transactions = Transaction.fromJson(jsonMap);
}
} catch (e) {
return transactions;
}
return transactions;
}
}
The UI component where I wanted to display the parsed JSON:
Code
FutureBuilder<Transaction>(
future: API_Manager.getDetails(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var data = snapshot.data!.statusObjects;
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) =>
Text('$index : ${data[index].status}'),
);
}
return Text('Something was wrong!');
},
),
I am quite sure that I have been missing a very small piece of code to make it work.
I have been working on this piece of code for quite a few days but am unable to do it.
I request you, people, to please help me out in attaining the result or point out the piece of code that I have left out.
Will appreciate it if you could help me in any possible way.

Answer 1

Bro, your are using wrongly *builder widgets, I've made some corrections at your code:
Service class
typedef JMap = Map<String, dynamic>;
class API_Manager {
static Future<Transaction> getData() {
return Future.delayed(Duration(seconds: 1), () => raw_response)
.then((response) {
return Transaction.fromJson(jsonDecode(response) as JMap);
});
}
}
const raw_response = '''
{
"data-description": "This api will return an array of objects to be placed in the order status timeline on the second screen",
"order-status": "Success",
"status-objects": [
...
]
}
''';
Presentation
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hi!'),
centerTitle: true,
),
body: Container(
child: FutureBuilder<Transaction>(
future: API_Manager.getData(),
builder: (context, snapshot) {
if (snapshot.hasError)
return Text(snapshot.error.toString());
if (snapshot.connectionState == ConnectionState.waiting)
return Center(child: CircularProgressIndicator());
if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
final data = snapshot.data!.statusObjects;
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) => Text('$index : ${data[index].status}'),
);
}
return Text('Something was wrong!');
},
),
),
);
}
}
Result:
UPDATED(1)
static Future<Transaction?> getDetails(String url) {
return http.get(Uri.parse(url))
.then((response) {
if (response.statusCode == 200)
return Transaction.fromJson(jsonDecode(response.body) as JMap);
return null;
})
.catchError((err) { print(err); });
}