StreamBuilder는 무엇인가.... 우선 stream 은 흐름, 연속 등의 의미를 가지고 있다.
이 말의 의미로 보아, StreamBuilder는 연속적으로 무언가를 처리하는 것이 아닐까?

1. 현재 시간을 연속적으로 보여주는 예제

StreamBuilder를 찾아보던 중에 한 게시글에서 이 예제를 보게 되었는데, 간단하면서도 이해가 잘 되는 것 같다고 생각하여 그 코드를 보며 나도 코드를 작성해 보며 기능을 확인하였다.

코드는 이러하다.

1-1. 우선, 시계를 컨트롤 할 수 있도록 _running 속성을 만들어 boolean을 담고, 이 값이 true 일 때 값을 연속적으로 반환하도록 한다.

bool _running = false;
Stream<String> clock() async* {
    while (_running) {
      await Future.delayed(const Duration(milliseconds: 200));
      DateTime now = DateTime.now();
      yield "${now.hour} : ${now.minute} : ${now.second}";
    }
 }

1-2. StreamBuilder를 이용하여 그 값을 보여준다.

StreamBuilder(
  stream: clock(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.toString());
    } else {
      return const Text('');
    }
  },
),

snapshot에는 FutureBuilder와 같이 connectionState, error, data 정보를 담고 있다.

1-3. 시계를 컨트롤 할 수 있는 버튼을 만든다.

ElevatedButton(
  onPressed: () {
  setState(() {
           _running = true;
           });
},
  child: const Text('start'),
    ),
      const SizedBox(
        height: 20.0,
      ),
        ElevatedButton(
        onPressed: () {
        setState(() {
                 _running = false;
                 });
},
  child: const Text('stop'),
),

2. 정리

StreamBuilder는 FutureBuilder와 비슷하게 비동기 처리에 대한 값을 받기 위한 표현이다. 하지만, StreamBuilder는 시간이 지남에 따라 변경될 수 있는 값으로 여겨진다. Stream을 계속 청취하며 새로운 값을 받게된다.

출처 )
Flutter > StreamBuilder/1
Flutter > StreamBuilder/2