I'm learning to fetch a data from an API using mockapi.
I followed the flutter examples using the HTTP package but there's something wrong with the code and I can't seem to figure it out.
I have tried several APIs the one with headers and the one without it.
store_groceries_api.dart
class Groceries {
final int id;
final String name;
final String images;
const Groceries({required this.id, required this.name, required this.images});
factory Groceries.fromJson(Map<String, dynamic> json) {
return Groceries(
id: json['id'], name: json['name'], images: json['images']);
}
}
Future<Groceries> fetchGroceries() async {
final response = await http.get(Uri.parse(
'https://6453dd71e9ac46cedf31d94e.mockapi.io/api/v1/groceries'));
if (response.statusCode == 200) {
final responseJson = jsonDecode(response.body);
return Groceries.fromJson(responseJson);
} else {
throw Exception("Failed to load groceries");
}
}
explore_screen.dart
class ExplorePage extends StatefulWidget {
const ExplorePage({Key? key}) : super(key: key);
@override
_ExplorePageState createState() => _ExplorePageState();
}
class _ExplorePageState extends State<ExplorePage>
with AutomaticKeepAliveClientMixin {
late Future<Groceries> futureGroceries;
@override
void initState() {
super.initState();
futureGroceries = fetchGroceries();
}
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: const [
Padding(
padding: EdgeInsets.all(20.0),
child: Text('Placeholder'),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Text('Placeholder'),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Text('Placeholder'),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Text('Placeholder'),
)
],
options: CarouselOptions(
autoPlay: true,
),
),
FutureBuilder<Groceries>(
future: futureGroceries,
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
ListView.builder(
padding: const EdgeInsets.all(10),
itemCount: 4,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data!.name),
);
});
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
)
],
),
);
}
@override
bool get wantKeepAlive => true;
}
The data im trying to read
[
{
"name": "name 1",
"images": "images 1",
"id": "1"
},
{
"name": "name 2",
"images": "images 2",
"id": "2"
},
{
"name": "name 3",
"images": "images 3",
"id": "3"
},
{
"name": "name 4",
"images": "images 4",
"id": "4"
}
]
Sorry if the codes are poorly made. As you can probably realize the if statement in the explore_screen.dart returned an error but the response status is 200
if (snapshot.hasData) {
ListView.builder(
padding: const EdgeInsets.all(10),
itemCount: 4,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data!.name),
);
});
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
A help would be appreciated
You are getting list of items from api, it will be
Future<List<Groceries>> fetchGroceries() async {
.....
if (response.statusCode == 200) {
final responseJson = jsonDecode(response.body);
return List.from(responseJson).map((e) => Groceries.fromJson(e)).toList();
} else {
throw Exception("Failed to load groceries");
}
}