StreamBuilder

Stream Builder 란?
StreamBuilder는 비동기 방식으로 시간에 따라 변하는 값을 지속적으로 동기화한다.

FutureBuilder과 차이점

FutureBuilder vs StreamBuilder

• FutureBuilder는 카메라에서 이미지 가져오기, 장치 배터리 가져오기, 파일 참조 가져오기, HTTP 요청 만들기 등과 같은 기본 플랫폼에서 데이터 한 번 가져오기와 같은 일회성 응답에 사용된다.
• StreamBuilder 는 치 업데이트 수신, 음악 재생, 스톱워치 등 같은 일부 데이터를 두 번 이상 가져온다.

예시 코드

아래는 1초 마다 1을 증가시키고, 화면에 갱신하는 코드이다.

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final int price = 2000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stream builder'),
      ),
      body: StreamBuilder<int>(
        initialData: price, //0. 초기 값 : 2000
        stream: addStreamValue(), //1. addStreamValue로 새로운 데이터가 들어 올때마다
        builder: (context, snapshot) {
          //2. snapshot 에 저장하고 builder 메소드를 통해 새로운 데이터로 화면에 갱신
          final priceNum = snapshot.data.toString();
          return Center(
            child: Text(
              priceNum,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 40,
                color: Colors.blue,
              ),
            ),
          );
        },
      ),
    ); 
  }

  Stream<int> addStreamValue() {
    return Stream<int>.periodic(
        Duration(seconds: 1), (counter) => price + counter);
  }
}

addStreamValue() 메소드에서 Stream.periodic() 를 통해 일정 시간마다 이벤트를 발생시킨다.

Duration은 1초 마다 price에 counter를 더해 1씩 증가시킨다.

StreamBuilder는 T를 받으므로 int로 명시해준다.

• initialData : 초기값
• stream:stream 메소드
• builder: stream 메소드의 결과 값을 화면에 갱신

참고

코딩쉐프 StreamBuilder