【发布时间】：2019-12-01 15:38:30
【问题描述】：
在我的 Flutter 项目中，我正在执行 API 调用以通过 GET 请求获取数据。从响应中解析出 JSON 对象 后，我只在 Text 小部件中显示该值。虽然加载数据需要时间，但与此同时，我的 Text 小部件显示为 null。
对于 API 调用部分，我有以下代码-
class Webservice {
Future<T> load<T>(Resource<T> resource) async {
var jwt = await LocalStore().getJWT();
print(jwt);
final response = await http.get(resource.url,
headers: {
'Content-Type': 'application/json',
'token': '${Constants.TOKEN}',
'jwt': '$jwt',
}
);
if(response.statusCode == 200) {
print('${response.body}');
return resource.parse(response);
} else {
throw Exception('Failed to load data!');
}
}
}
我为 JSON 解析做了一个 Model 类-
class Category {
int catNote;
int catTodo;
int catRem;
int catTag;
int catUrgent;
int catWork;
int catOffice;
int catPersonal;
Category(
{this.catNote,
this.catTodo,
this.catRem,
this.catTag,
this.catUrgent,
this.catWork,
this.catOffice,
this.catPersonal});
Category.fromJson(Map<String, dynamic> json) {
catNote = json['cat_note'];
catTodo = json['cat_todo'];
catRem = json['cat_rem'];
catTag = json['cat_tag'];
catUrgent = json['cat_urgent'];
catWork = json['cat_work'];
catOffice = json['cat_office'];
catPersonal = json['cat_personal'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['cat_note'] = this.catNote;
data['cat_todo'] = this.catTodo;
data['cat_rem'] = this.catRem;
data['cat_tag'] = this.catTag;
data['cat_urgent'] = this.catUrgent;
data['cat_work'] = this.catWork;
data['cat_office'] = this.catOffice;
data['cat_personal'] = this.catPersonal;
return data;
}
static Resource<Category> get allCategory {
return Resource(
url: '${Constants.BASE_URL}category',
parse: (response) {
print('my result ${response.body}');
final result = json.decode(response.body);
Category category = Category.fromJson(result) ;
return category;
}
);
}
}
现在，在我的主课中，我创建了一个如下所示的函数-
void _getAllCategories() {
Webservice().load(Category.allCategory).then((newsArticles) => {
setState(() => {
_category = newsArticles
})
});
}
之后，我在 initState 函数中调用了该函数，并将值保存在 _category 对象中。
然后在文本小部件的 Widget build(BuildContext context) 函数中，我使用了来自 _category 对象的值，如下所示，使用三元运算符来检查对象是否是是否为空。如果为空，则应显示 0，如果不为空，则应显示原始值-
child: _category ==null?
Text('0',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
):
Text('${_category.catToDo}',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
)
但它仍然显示空值，而数据加载需要几秒钟，并显示如下输出-
所以，我需要一个解决方案来显示进度对话框，或者在数据加载需要时间时将默认值显示为 0。如果有人帮助我编写这段代码，那就太好了。
【问题讨论】：
-
Future.builder 类 - api.flutter.dev/flutter/widgets/FutureBuilder-class.html
-
我在从 api 获取文本字段中的数据时遇到同样的问题
标签： flutter dart progress-bar loading dataloader