Listing Data from API with Flutter - flutter

Question

I can pull my data but not mirror it. The examples on the internet have always been used to reflect a single data. The data I have is multiple data. I want to reflect the data of different countries as a list.
I used Listview.builder and ListTile but it didn't work. I keep getting different errors. I couldn't find an up-to-date and working example. Could you help?
I have an API.
API URL: https://covid19-mohfw.herokuapp.com/
I converted this data as a model.
My Model:
class CovidModel {
List<States>? states;
Totals? totals;
CovidModel({this.states, this.totals});
CovidModel.fromJson(Map<String, dynamic> json) {
if (json['states'] != null) {
states = <States>[];
json['states'].forEach((v) {
states!.add(new States.fromJson(v));
});
}
totals =
json['totals'] != null ? new Totals.fromJson(json['totals']) : null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.states != null) {
data['states'] = this.states!.map((v) => v.toJson()).toList();
}
if (this.totals != null) {
data['totals'] = this.totals!.toJson();
}
return data;
}
}
class States {
String? state;
int? cases;
int? recoveries;
int? deaths;
int? total;
States({this.state, this.cases, this.recoveries, this.deaths, this.total});
States.fromJson(Map<String, dynamic> json) {
state = json['state'];
cases = json['cases'];
recoveries = json['recoveries'];
deaths = json['deaths'];
total = json['total'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['state'] = this.state;
data['cases'] = this.cases;
data['recoveries'] = this.recoveries;
data['deaths'] = this.deaths;
data['total'] = this.total;
return data;
}
}
class Totals {
int? cases;
int? recoveries;
int? deaths;
int? total;
Totals({this.cases, this.recoveries, this.deaths, this.total});
Totals.fromJson(Map<String, dynamic> json) {
cases = json['cases'];
recoveries = json['recoveries'];
deaths = json['deaths'];
total = json['total'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['cases'] = this.cases;
data['recoveries'] = this.recoveries;
data['deaths'] = this.deaths;
data['total'] = this.total;
return data;
}
}
and my fetchCountry file from which I Pulled Data
import 'dart:convert';
import 'package:covidapp/models/covidModel.dart';
import 'package:http/http.dart' as http;
class FetchCountry {
Future<CovidModel> fetchData() async {
final response =
await http.get(Uri.parse("https://covid19-mohfw.herokuapp.com/"));
if (response.statusCode == 200) {
final result = CovidModel.fromJson(jsonDecode(response.body));
return result;
} else {
throw Exception('Error');
}
}
}
Finally, the part where I try to reflect the data:
import 'package:covidapp/models/covidModel.dart';
import 'package:flutter/material.dart';
import 'package:covidapp/services/fetchCountry.dart';
class covidPage extends StatefulWidget {
const covidPage({Key? key}) : super(key: key);
#override
State<covidPage> createState() => _covidPageState();
}
class _covidPageState extends State<covidPage> {
late Future<CovidModel> futureCountry = FetchCountry().fetchData();
#override
void initState() {
super.initState();
futureCountry = FetchCountry().fetchData();
}
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
height: double.infinity,
color: Color.fromRGBO(255, 246, 234, 1),
child: Column(children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.03,
),
const Text(
'Covid Data',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 29,
fontWeight: FontWeight.w700,
color: Color.fromARGB(255, 112, 108, 112)),
),
]),
)),
);
}
}

Answer 1

Store all your data in model instead of future model will work
class _covidPageState extends State<covidPage> {
late CovidModel? futureCountry;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
futureCountry = await FetchCountry().fetchData();
print(futureCountry?.states?.length); // You can access all data with futureCountry?.
setState(() {});
});
}
/// your code

Answer 2

You can use a FutureBuilder like this:
FutureBuilder(
future: futureCountry,
builder: (context, snap) {
if (snap.connectionState == ConnectionState.waiting) {
return CupertinoActivityIndicator();
}
if (snap.hasError) {
return Text("Error!");
}
final data =
snap.data as CovidModel;
return ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.symmetric(vertical: 20),
physics: const AlwaysScrollableScrollPhysics(),
itemCount: data.states.length,
itemBuilder: (c, index) => CovidDetailWidget(data[index]),
);
},
)

Answer 3

Use the Below code to show data in List view
import 'package:flutter/material.dart';
import 'package:link/deep_link.dart';
class covidPage extends StatefulWidget {
const covidPage({Key? key}) : super(key: key);
#override
State<covidPage> createState() => _covidPageState();
}
class _covidPageState extends State<covidPage> {
late CovidModel? futureCountry = null;
#override
void initState() {
super.initState();
_getData();
}
void _getData() async {
futureCountry = (await FetchCountry().fetchData());
Future.delayed(const Duration(seconds: 1)).then((value) => setState(()
{}));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('REST API Example'),
),
body: futureCountry?.states == null || futureCountry?.states?.length == 0
? const Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: futureCountry?.states?.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(futureCountry?.states![index].state ?? ''),
],
),
],
),
);
},
),
);
}
}