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가 잘 되었다.