Server API's data not showing using flutter - json

Question

i'm new to flutter, i'm trying to display response from the server on my screen. I'm trying to fetchi data from server APIs, The data is being successfully fetched from the server but the issue is that the data it cant be shown.
i have no experience with showing API's data and request to server thing, so i dont know how to display it.
This is my model
class Food {
late int id;
late String title;
late String img_id;
late int user_id;
late int views;
late String bahan;
late String create;
late String update;
late String user;
Food(
{required this.id,
required this.title,
required this.img_id,
required this.user_id,
required this.views,
required this.bahan,
required this.create,
required this.update,
required this.user});
factory Food.fromJson(Map<String, dynamic> json) {
return Food(
id: json['id'],
title: json['title'],
img_id: json['img_id'],
user_id: json['user_id'],
views: json['views'],
bahan: json['bahan'],
create: json['create'],
update: json['update'],
user: json['user']);
}
}
This is my class for calling api
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:project/model/food.dart';
class FoodProvider extends ChangeNotifier {
Future<Food> getFood() async {
var result = await http.get(
Uri.parse('http://sweetreats.herokuapp.com/api/recipe'),
);
print(result.statusCode);
if (result.statusCode == 200) {
// List data = json.decode(result.body);
// List<Food> foods = data.map((item) => Food.fromJson(item)) as List<Food>;
// return foods;
return Food.fromJson(jsonDecode(result.body));
} else {
throw Exception();
}
}
}
and this is the way how i tried to display the data
FutureBuilder<Food>(
future: foodProvider.getFood(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List? data = snapshot.data as List?;
int index = 0;
return Column(
children: data!.map((item) {
index++;
return Container(
margin: EdgeInsets.only(
top: index == 1 ? 0 : 30,
),
child: FoodItem(food: item),
);
}).toList());
}
return Center(
child: CircularProgressIndicator(),
);
}),

Answer 1

Changes in Model
class Food {
final int? id;
final String? title;
final String? img_id;
final int? user_id;
final String? views;
final String? bahan;
final String? create;
final String? update;
final String? user;
Food({
required this.id,
required this.title,
required this.img_id,
required this.user_id,
required this.views,
required this.bahan,
required this.create,
required this.update,
required this.user,
});
factory Food.fromJson(Map<String, dynamic> json) {
return Food(
id: json['id'],
title: json['title'],
img_id: json['img_id'],
user_id: json['user_id'],
views: json['views'],
bahan: json['bahan'],
create: json['create'],
update: json['update'],
user: json['user'],
);
}
}
Changes in Provider
class FoodProvider extends ChangeNotifier {
Future<List<Food>> getFood() async {
try {
var result = await http.get(
Uri.parse('http://sweetreats.herokuapp.com/api/recipe'),
);
if (result.statusCode != 200) {
throw result.body;
}
final data = json.decode(result.body);
return List<Food>.from(
data['recipes'].map((e) => Food.fromJson(e)).toList(),
);
} catch (_) {
rethrow;
}
}
}
Changes in UI
FutureBuilder<List<Food>>(
future: FoodProvider().getFood(),
builder: (context, AsyncSnapshot<List<Food>> snapshot) {
if (snapshot.hasError) {
return Center(
child: Text('Something went wrong ${snapshot.error}'),
);
} else if (snapshot.hasData) {
// return ListView.builder(itemBuilder: (_, i) {}, itemCount: snapshot.data.,)
List? data = snapshot.data;
int index = 0;
return Column(
children: data!.map((item) {
index++;
return Container(
margin: EdgeInsets.only(top: index == 1 ? 0 : 30),
child: Text(item.title ?? ''),
);
}).toList());
} else {
return const Center(child: CircularProgressIndicator());
}
},
),