[Flutter] - Future Builder

개요

이전 학습에서 http를 이용하여 비동기 API 통신을 했다.

Future도 간단하게 공부를 하였는데, 

 

결국 API 통신은 즉각적으로 바로 결과가 오는게 아니라, 상황에 응답 속도가 다르다. 그렇기에 일반적으로 로딩화면을 통해 데이터를 가져오고 있다는 것을 사용자에게 보여준다.

 

그렇다면 데이터가 도착하지 않았을 때는 로딩화면이 돌고 정상적으로 데이터 도착이 완료가 되었을 때 데이터를 보여주기 위해서는 어떻게 해야할까?

 

바로 Future Builder이다.

 

child: FutureBuilder(
          future: webtoons,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return const Text("There is data!");
            }
            return const Text("is Not Done..");
          },
        ),

위의 코드는 간단한 예제이다.

 

future: 에는 future 데이터가 온다. 

그리고 builder: 에는 context, snapshot이 오는데

snapshot을 통해 데이터가 정상적으로 도착했는지 확인할 수 있다.

위의 코드는 hasData를 통해 데이터가 정상적으로 도착했으면 데이터가 있다라는 것을 화면에 보여주고, 

그게 아니면 도착하지 않았어요.. 를 보여주도록 했다.

 

실제로 실행을 해보면, 

is Not Done 상태로 시작을 하다, 데이터가 정상적으로 도착하면 There is data로 바뀌는 것을 확인할 수 있다.

 

이를 응용하여 로딩 아이콘을 넣기 위해서는 CircularProgressIndicator()를 사용하면 된다.