[flutter] 플러터 FutureBuilder, StreamBuilder 비동기 사용법 이론 간단 정리

FutureBuilder

비동기로 데이터를 가져올때 사용한다. 보통 api통신에서 많이 사용되며, snapshopt상태에 따라서 다양한 기능을 넣을 수 있다.

StreamBuilder

비동기로 데이터를 가져올때 사용한다. FutureBuilder와는 다르게 데이터를 stream형태로 지속적으로 가져와서 위젯을 추가 또는 삭제 할 수 있다.

 

FutureBuilder 간단 사용방법

FutureBuilder 함수 (보통 api통신부분이 들어가지만 delay를 써서 간단한 함수 구현)

getNumber함수는 3초 뒤에 랜덤값을 반환하는 함수.

반환값은 Future<int> 이다.

Future<int> getNumber() async {
    await Future.delayed(Duration(seconds: 3));

    final random = Random();
    //throw Exception("에러가 발생");
    return random.nextInt(100);
  }

사용

snapshot를 활용하여 값이 있는지 에러가 있는지 확인하여 적절한 위젯을 노출 할 수 있다.

FutureBuilder위젯을 사용하며, future속성에 Future를 반한하는 함수를 넣어줍니다.

Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FutureBuilder(
          future: getNumber(),
          builder: (context, snapshot) {
            // if (!snapshot.hasData) {
            //   return Center(
            //     child: CircularProgressIndicator(),
            //   );
            //}
            if (snapshot.hasData) {
              //데이터가 있을 때
            }
            if (snapshot.hasError) {
              //에러가 있을 때
            }
            
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  "FutureBuilder",
                  style: textStyle.copyWith(
                      fontWeight: FontWeight.w700, fontSize: 20),
                ),
                Text(
                  "ConState : ${snapshot.connectionState}",
                  style: textStyle,
                ),
                Text(
                  "Data : ${snapshot.data}",
                  style: textStyle,
                ),
                Text(
                  "Error : ${snapshot.error}",
                  style: textStyle,
                ),
                ElevatedButton(
                    onPressed: () {
                      setState(() {});
                    },
                    child: Text("setState"))
              ],
            );
          },
        ),
      ),
    );

설명 : 해당 위젯을 실행하면 3초 뒤에 값이 나오는걸 볼 수 있으면 Button을 눌러 setState를 호출하게되면 해당 위젯이 다시 초기화 되어 다시 함수가 불리워진다.

StreamBuilder 간단 사용 방법

StreamBuilder함수는 반환값이 stream이여야 하고 중간에 yield를 통해 값을 계속 반환하고 있습니다.

for문 중간에 딜레이를 1초를 주어 1초 주기로 값이 계속 반환됩니다.

에러 상황을 확인하기 위해서 값이 5일경우 에러를 리턴

Stream<int> streamNumbers() async* {
    for (var i = 0; i < 10; i++) {
      await Future.delayed(Duration(seconds: 1));
      if (i == 5) {
        throw Exception("asdf");
      }
      yield i;
    }
  }

 

 

Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: StreamBuilder<int>(
          stream: streamNumbers(),
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  "StreamBuilder",
                  style: textStyle.copyWith(
                      fontWeight: FontWeight.w700, fontSize: 20),
                ),
                Text(
                  "ConState : ${snapshot.connectionState}",
                  style: textStyle,
                ),
                Text(
                  "Data : ${snapshot.data}",
                  style: textStyle,
                ),
                Text(
                  "Error : ${snapshot.error}",
                  style: textStyle,
                ),
                ElevatedButton(
                    onPressed: () {
                      setState(() {});
                    },
                    child: Text("setState"))
              ],
            );
          },
        ),
      ),
    );

 

설명 : FutureBuilder와 별 다를건 없고 위젯 명을 StreamBuilder로 변경해 줍니다. 

그리고 stream속성에 위에서 만든 함수를 넣어주게 되면 1초 주기로 ui가 지속적으로 변경되는걸 볼 수 있습니다.

5가 되면 에러를 확인가능하고 button을 누르면 다시 처음부터 for문이 실행되는걸 볼 수 있습니다.

 

정리

FutureBuilder, StreamBuilder는 api통신시에 많이 사용하며, 설명한 개념만 이해하시면 사용하는데 큰 어려움 없이 사용 하는데 문제 없다고 생각됩니다. StreamBuilder는 모두 종료시에 (State : done)스트림을 닫아줄 필요가 없습니다.