[플러터] FutureBuilder 사용하기 - 로딩 indicator 넣기

⚡️ api로 데이터를 받아올 때, 비동기처리시에 요긴하게 쓰일 futurebuilder! 화면 이동시에 데이터가 다 넘어오기 전에 부분적으로 로딩되는 것을 방지하기 위해서 인디케이터등을 띄울 때가 있는데 이걸 하기 위해서 FutureBuilder 라는 것이 필요하다 

 

 

 

FutureBuilder 공식문서

FutureBuilder class - widgets library - Dart API

 

아래는 내가 쓴 코드인데, 쉽게 설명해보자면

FutureBuilder 안에 future , builder 를 써줘야합니다.

ConnectionState.done은 비동기 데이터 수신이 완료되었다는 의미

그래서 조건문으로 비동기 데이터 수신이 되지 않았다면 loading ...이라는 단어가 뜨게 하고

else로 데이터가 다 수신 되었을 때 해당 내용들이 뜰 수 있게 했습니다 

 

future에는 비동기 api를 써주면 되는데, getX로 데이터를 컨트롤하고 있었기에 그부분을 적어줬답니다 

생각보다 참 쉬죵?