플러터 공부일지 (2)

FutureBuilder

• FutureBuilder를 통해 Future의 현상태를 쉽게 파악하고 데이터를 불러오는 동안 보여줄 것과 이용 가능할 때 보여줄 것의 선택이 가능해짐.

Future<MyData> _data;

initState(){
    _data = http.get('~');
}

FutureBuilder(
    future: _data,
    builder: (context, snapshot){
        if(snapshot.connectionState == done){
            return AwesomeData(snapshot.data);
        }
        else{
            return CircularProgressIndicator();
        }
    }
)

• builder 함수 안에서 setState를 넣지 않더라도 자동으로 화면 변화를 적용할 수 있음
• snapshot 관련 데이터가 바뀐다? -> builder 다시 불림
• 데이터 값이 캐싱됨. 때문에 setState를 실행하여 새로 빌드 했을 때 데이터 값이 null부터 다시 돌아가는 것이 아니라 마지막으로 가져온 기존 데이터 값을 데이터 값에 넣어주고 그 이후 새로 들어온 값을 보여줌.
• 에러가 나는 동안에도 캐싱 -> (에러 발생 상태에서 setState 실행하면 error 값 유지한 상태로 ConnectionState.waiting -> ConnectionState.done 상태가 됨.)

StreamBuilder

• Dart는 Streams를 사용하여 비동기식 데이터 스트림을 지원함.

Stream<int> count() async*{
    int i = 1;
    while(ture){
        yield i++;
    }
}

• 플러터는 StreamBuilder 위젯을 사용하여 Streams를 사용.
• initialData를 사용하여 초기 데이터를 제공하여 첫이벤트를 기다리는 동안 데이터를 보여주거나
  snapshot.hasData 로 스냅샷에 데이터가 있는지 확인한다.

StreamBuilder<int>(
    stream: _myStream, // stream 값 연결
    // initialData: 42,
    builder: (context, snapshot){
        //if(!snapshot.hasData){
        //    return CircleProgressIndicator();
        //}
        return MyWidget(snapshot.data);
    },
);

• StreamBuilder도 FutureBuilder와 마찬가지로 데이터 값이 캐싱됨.
• Future를 리턴해주는 함수 같은 경우 dispose 해줄 필요 없지만 Stream은 한번 열게되면 닫아줘야함. 하지만 StreamBuilder는 모든 Stream을 닫는 것까지 알아서 해주기 때문에 Stream 닫는 것을 신경쓸 필요 없음.

StreamBuilder와 async*

• StreamBuilder는 Stream을 기반으로 데이터 흐름을 감지하고 데이터가 업데이트 될 때마다 builder를 실행. 때문에 async* 함수를 사용하여 Stream을 생성하여 Stream을 구독하고 데이터가 발생할 때마다 builder를 실행할 수 있음.

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html