728x90
반응형
: 비동기 함수에서 리턴하는 Future<변수> 받아 먼저 Build하고 비동기 함수 계산이 완료되면 실제 리턴 값을 보여준다.
FutureBuilder를 쓰는 이유
API와 통신을 할 때 서버와 모바일 기기는 데이터를 대표적으로 JSON으로 통신한다. 데이터 단위가 크면 클수록 서버에서 기기로 송신하고 수신하는 데 시간이 오래 걸린다. 이 때 모바일 기기 입장에서 다른 일도 많은데 데이터 수신만 기다릴 수 없다.
따라서 기기는 다른 일을 먼저 처리하고 만약 데이터가 완전하게 도착하면 그 때 미뤄왔던 일을 처리한다. 앱 사용자들은 이 모든 과정을 로딩 화면으로 인식한다.
💫 서버에서 데이터를 받아올 때 어플리케이션 측에서는 정보를 언제 다 받는지 알수가 없다. 그렇기 때문에 future의 상태를 확실히 확인하는 과정이 필요하다.
코드 설명
body: FutureBuilder(
future: webtoons,
builder: (context, snapshot) {
if (snapshot.hasData) {
return const Text('There is data!');
}
return const Text('Loading....');
},
),
- FutureBuilder : build의 리턴 값으로 주로 쓰이고 매개변수로 future와 builder를 갖는다.
- future : Future 변수를 리턴하는 함수가 들어간다.
- builder : BuildContext와 AsyncSnapshot을 받는 함수가 들어가야 한다.
- StreamBuilder에서 같이 영상 스트림 데이터, FutureBuilder에서 이미지, JSON 파일에서 쓰인다.
FutureBuilder와 AsyncSnapshot
비동기 함수 연산이 완료되면 값을 돌려받는다. 이때 boolean 값으로 데이터가 다 들어왔는지, 에러가 생겼는지 확인할 수 있다.
1) ConnectionState로 데이터 상태 확인
종류 코드 값 의미
| ConnectionState.done | snapshot.connectionState == ConnectionState.done | true or false | 데이터 전체가 들어왔는지? |
| ConnectionState.active | snapshot.connectionState == ConnectionState.active | true or false | 데이터가 들어오기 시작되었는지?(일부라도 들어오면 true) |
| ConnectionState.none | snapshot.connectionState == ConnectionState.none | true or false | 데이터가 아직 들어오지 않았는지? |
| ConnectionState.waiting | snapshot.connectionState == ConnectionState.waiting | true or false | 아직 데이터가 안 들어왔고 들어오길 기다리는 중인지? |
2) snapshot의 데이터상태
종류 코드 값 의미
| snapshot.hasdata | if(snapshot.hasdata == true) | true or false | 데이터가 정상적으로 들어왔는지? |
| snapshot.haserror | if(snapshot.haserror == true) | true or false | 들어온 데이터가 에러가 있는지? |
FutureBuilder에서 위에 있는 조건 값에 충족하면 UI는 즉시 다시 빌드된다.
실행 화면
🔗 참고
728x90
반응형
