우선 Future Widget Build와 연결하려면 위 Future 값을 반환하는 메서드를 바꿔줘야한다.
반환타입을 Future<실제반환타입>
으로 말이다. the future resolves
를 기반으로 해서
따라서 최소 2개의 키 parameter가 필요한데 우선
또한 Future builder는 에러 핸들링은 다르게 한다. 굉장히 짧은 코드만을 이용한다
뭐 loading state도 필요없고~
void _loadItems() async {
final url = Uri.https(
'react-http-e4fe2-default-rtdb.asia-southeast1.firebasedatabase.app',
'shopping-list.json',
);
try {
final response = await http.get(url);
// throw Exception('An error occurred!');
if (response.body == 'null') {
setState(() {
_isLoading = false;
});
return;
}
if (response.statusCode >= 400) {
setState(() {
_error = "Failed to fetch data. Plz try again later.";
});
}
final Map<String, dynamic> listData = json.decode(response.body);
final List<GroceryItem> loadedItems = [];
for (final item in listData.entries) {
final tempCategory = categories.entries
.firstWhere((data) => data.value.title == item.value['category'])
.value;
loadedItems.add(GroceryItem(
id: item.key,
name: item.value['name'],
quantity: item.value['quantity'],
category: tempCategory));
}
setState(() {
_groceryItems = loadedItems;
_isLoading = false;
});
} catch (err) {
setState(() {
_error = err.toString();
});
}
}
Future<List<GroceryItem>> _loadItems() async {
final url = Uri.https(
'react-http-e4fe2-default-rtdb.asia-southeast1.firebasedatabase.app',
'shopping-list.json',
);
final response = await http.get(url);
// throw Exception('An error occurred!');
if (response.body == 'null') {
return [];
}
if (response.statusCode >= 400) {
throw Exception('Failed to fetch grocery items. Please try again later.');
}
final Map<String, dynamic> listData = json.decode(response.body);
final List<GroceryItem> loadedItems = [];
for (final item in listData.entries) {
final tempCategory = categories.entries
.firstWhere((data) => data.value.title == item.value['category'])
.value;
loadedItems.add(GroceryItem(
id: item.key,
name: item.value['name'],
quantity: item.value['quantity'],
category: tempCategory));
}
return loadedItems;
}
이는 앞서도 설명한 적이 있다. 이 키워드는 초반에는 물론 값이 안 들어있지만 해당 값이 사용되기 전에는 반드시 값이 있다는 것을 알려줄 때 사용되는 키워드이다.
즉, 여기 future에서 해당 값에 대하여 listen하고 있다가 값이 바뀌면 builder 메서드를 실행하는 것이다.
그리고 이제 builder 메서드에서 값을 반환하는데 이때 한개의 위젯을 반환하는 것이 아닌 다양한 위젯을 반환해도 된다.
데이터만 로드해야 하는 화면이나 위젯이 있다면 로드 완료 여부에 따라
다른 상태를 보여주고 데이터와 관련된 다른 논리가 없다면요
미래의 건축가가 이상적이겠죠
현재 상태에 기반해 다양한 상태를 렌더링하는 과정을 단순화할 수 있으니까요