服务器 API 的数据未使用颤振显示

Question

我是新的扑动，我试图在我的屏幕上显示服务器的响应。我试图从服务器api获取数据，数据正在成功地从服务器获取，但问题是，它不能显示的数据。

我没有显示API的数据和请求服务器的东西的经验，所以我不知道如何显示它。

这是我的模型

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']);
}
}

这是我调用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();
}
}
}

这就是我试图显示数据的方式

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

模型变化

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'],
);
}
}

提供商变更

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;
}
}
}

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());
}
},
),