Flutter/Flutter 기본

[Flutter] StreamBuilder

Chafle 2023. 5. 20. 03:37
반응형
  Stream<int> streamNumbers() async* {
    for(int i = 0 ; i < 10; i++){
      if(i == 5) {
        throw Exception(' i = 5');
      }

      yield i;
    }
  }

 

 

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(
      fontSize: 16.0,
    );
    return Scaffold(
        body: StreamBuilder<int>(
          stream: streamNumbers() ,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          if(snapshot.hasData) {
            //hasData는 Data값이 null인지 아닌지만 확인, 데이터가 있을 때 위젯 렌더링
          }
          if(snapshot.hasError) {
            //에러가 났을 때의 렌더링
          }
          //데이터도 없고, 에러도 없는, 로딩중일 때 위젯 렌더링

          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Text('FutureBuilder',
                Text('StreamBuilder',
              style: textStyle.copyWith(
                fontWeight: FontWeight.w700,
                fontSize: 20.0,
              ),
              ),
              Text(
                'ConnectionState : ${snapshot.connectionState}',
                style: textStyle,
              ),
              Text(
                'Data : ${snapshot.data}',
                style: textStyle,
              ),
              Text(
                'Error : ${snapshot.error}',
                style: textStyle,
              ),
              ElevatedButton(
                  onPressed: () {
                    setState(() {
                      //snapshot값이 변경되면, builder를 다시 부르고
                      // setState를 해도 StreamBuilder는 캐싱기능을 통해 이전 값을 화면에 남겨둔다.(FutureBuilder의 장점)
                    });
                  },
                  child: Text('setState')),
            ],
          );
        },
      )
    );
  }

 

 

Future / Steam Builder 공통점

 

- SetState나 snapshot의 값이 변경됐을 때, builder가 다시 불려도 Data가 바뀌기 전까지 캐싱 기능을 통해 이전 값을 표시해준다

- Dispose해주지 않아도 된다

 

 

Future / Steam Builder 차이점

 

- future은 async로, stream은 async*로

- future은 return으로 값을 받고, stream은 yield로 받는다.

- future의 ConnectionState는 waiting -> done, stream은 waiting->active->done

반응형