Skip to main content

flutter Futurebuilder Future 객체 리로드 시 상태 반영하기

개요​

FutureBuilder Future 객체의 상태를 snapshot 속성을 통해 감지할 수 있습니다.

첫 Future 객체가 성공적으로 불러온 후에 다시 Future 객체 정보를 불러들이는 경우 (새로고침 또는 불러올 정보가 바뀔 때)

새 Future 객체의 데이터를 가져오고 있는 중에 다시 로딩중임을 출력할 필요가 있습니다.

관련 속성이 당연히 있으리라 생각했지만,

없습니다.

솔루션​

setState 활용​

setState 를 사용하여 Future 객체에 null을 저장하도록 합니다.

FutureBuilder 에서 제공하는 snapshot.hasData 속성은 null이 아닐 때 true 를 반환합니다.

따라서 새로운 데이터를 로딩하는 과정에서 처음과 동일한 로딩 화면을 출력하기 위해서는

먼저 null 을 저장해야 합니다.

Future 객체 선언​

Future? _dataListFuture;

새로운 데이터를 불러올 때 setState 활용​

onTap : () {
  setState(() {
    _dataListFuture = null;
    _dataListFuture = getNewDataList();
  })
}

FutureBuilder 위젯 일부​

FutureBuilder<String>(
        future: _dataListFuture,
        builder: (context,  snapshot) {
          children;
          if (snapshot.hasData) {
            /// Future 객체가 null이 아닐 경우
          } else if (snapshot.hasError) {
            /// 에러가 발생하는 경우, null 여부와 다릅니다.
          } else {
           /// 로딩 중일떄, Future 객체가 null 일 경우 이 조건을 탑니다.
          }
        })

StreamBuilder 활용​

자세한 내용은 플러터 공식 문서를 참고하세요.

참고 자료​