[Flutter]FutureBuilder

FutureBuilder

자체가 상태가 변하는 위젯

• Future 즉, 미래 특정 시점에 이용 가능한 아직 확정되지 않은 값이나 오류를 표현할때 쓰는 객체.

• Future를 실행시켜서 나온 데이터를 위젯으로 보여주고 싶을때 사용.

  • ex). 서버에서 사진을 가져와서(비동기)핸드폰에 띄워줄때

• setState 사용 안해도 됨.(setState와 역할이 비슷하기 때문!)

• ConnectionState라는 값을 통해 우리에게 알려준다.

  • ConnectionState.done: 데이터 확인 가능함
  • ConnectionState.waiting: 데이터가 들어오길 기다리는 중

사용법

FutureBuilder(
	future: serverConnectionDelay(),
    builder: (context, snapshot){
      //server에서 데이터를 가져오는 것을 기디라는 동안 다른 화면을 보여줌
    	if(snapshot, connectionState == connectionState.waiting) {        
        	return const CupertinpActivityIndicator();
    	}
        //가져온 데이터가 오류가 났을 경우
        if(snapshot, hasError) {        
        	return Column(
              children: const [Icon(Icons.error), Text("데이터 오류가 발생했습니다.")]
            );
    	}
      //가져온 데이터가 없는 경우
    	if(snapshot, hasData) {        
        	return Column(
              children: const [Icon(Icons.cancel), Text("데이터가 존재하지 않습니다.")]
    }
      //정상적으로 데이터를 가져온 경우
      return const Text("데이터 가져오는데 성공했습니다.")
)

실행 1

FutureBuilder(
	future: Future.delayed(Duration(seconds: 3), ()=> "Hello"),
    builder: (context, snapshot){
    	if(snapshot, ConnectionState == ConnectionState.done) {         //데이터 확인이 가능할때 
        	return Text(snapshot.data!);
    	}
        return Container();
    }
)

future: Future.delayed(Duration(seconds: 3), ()=> "Hello"), 이것을 실행시켜주는 것.
3초 뒤에 받아 올 데이터 => "Hello"

builder는 상태를 전달할 수 있는 속성값을 넣어준다.

다른 방법!

FutureBuilder(
	future: Future.delayed(Duration(seconds: 3), ()=> "Hello"),
    builder: (context, snapshot){
    	if(snapshot.hasData) {         //데이터 확인이 가능할때 
        	return Text(snapshot.data!);
    	}
        return Container();
    }
)

hasData 데이터가 있으면 ture가 되는데 즉, 데이터를 가져와라는 것을 사용해서 더 쉽게 데이터를 가져 올 수 있다.

return Text(snapshot.data?.data.toString();
snapshot데이터가 null이면 뒤에 있는 거 실행을 안함.

return Text(snapshot.data?.data.toString() ?? "실패");

그래서 (??)을 붙여줘서 새로운 값을 붙여준다.

return Text(snapshot.data!.data.toString());

아니면 이렇게 써줘도 된다!

만약 FutureBuilder가 없으면 데이터가 다 받아지기를 기다린 후 화면을 그리거나 setState()를 통해 바꿔줘야한다.