FutureBuilder사용 위젯 Reload하기 (setState 사용)
FutureBuilder를 return하는 위젯에서 setState를 통해 reload하려고 했으나, reload가 되지 않는 문제가 발생했다.
원래 코드는 다음과 같았다.
Future<List<WeeklyBoxModel>> futureWeeklyBoxList;
Future<List<FwBoxModel>> futureFwBoxList;
_fetchData() {
userId = Provider.of<UserProvider>(context, listen: false).user.userId;
futureWeeklyBoxList = getWeeklyBoxList(userId);
futureFwBoxList = getFwBoxList(userId, DateFormat("yyyy-MM-dd").format(DateTime.now()));
}
@override
void initState() {
super.initState();
_fetchData();
}
_fetchData함수를 따로 만들어서 서버에서 데이터를 가져오는 함수 getWeeklyBoxList와 getFwBoxList를 호출했다.
그리고 FutureBuilder를 리턴하는 위젯을 reload하고 싶을 때
setState(() { _fetchData(); });
이런식으로 데이터를 새로 불러와 화면에 나타내고 싶었지만, 작동하지 않았다.
위 문제를 해결하기 위해 다음과 같이 코드를 수정했다.
Future<List<WeeklyBoxModel>> futureWeeklyBoxList;
Future<List<FwBoxModel>> futureFwBoxList;
@override
void initState() {
super.initState();
userId = Provider.of<UserProvider>(context, listen: false).user.userId;
futureWeeklyBoxList = getWeeklyBoxList(userId);
futureFwBoxList = getFwBoxList(userId, DateFormat("yyyy-MM-dd").format(DateTime.now()));
}
initState에서 api를 통해 데이터를 가져오는 함수 getWeeklyBoxList와 getFwBoxList를 직접 호출하여
Future형 변수에 저장하였고,
위젯에서는 다음과 같이 불러온 데이터가 저장되어 있는 Future형 변수를 FutureBuilder의 future에 넣어주었다.
Widget fwSection() {
return FutureBuilder(
future: futureFwBoxList,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasError) {
handleException(context, snapshot.error);
}
if (snapshot.hasData) {
fwBoxList = snapshot.data;
return Container(
height: size.getSize(130.0),
child: Column(
children: [
sectionTitle(false),
Divider(thickness: 2),
Expanded(
child: SingleChildScrollView(
child: fwBoxListSection()
),
)
],
)
);
} else {
return Container( // 데이터가 아직 로드되지 않은 경우 뺑글뺑글 돌아가는 CircularProgressIndicator를 보여줌
height: size.getSize(300),
child: Center(child: CircularProgressIndicator()));
}
});
}
그리고 이 FutureBuilder를 리턴하는 위젯을 reload하고 싶을 때마다 다음과 같이 setState를 사용했다.
setState(() {
futureFwBoxList = getFwBoxList(userId, DateFormat("yyyy-MM-dd").format(DateTime.now()));
});
이제 문제가 해결되어 reload가 잘 되었다.
Author And Source
이 문제에 관하여(FutureBuilder사용 위젯 Reload하기 (setState 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hssarah/FutureBuilder사용-위젯-Reload하기-setState-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)