[Flutter] Future builder 와 Stream builder의 차이

FutureBuilder와 StreamBuilder는 모두 Flutter에서 비동기 데이터를 UI에 반영할 때 사용하는 위젯

하지만 두 위젯은 처리하는 비동기 데이터의 성격에 차이가 있으며, 그에 따라 동작 방식도 다름

1. FutureBuilder

FutureBuilder는 한 번만 결과를 반환하는 비동기 작업을 처리할 때 사용됩니다. Future는 비동기 작업이 완료되면 한 번 결과를 반환하고, 그 이후에는 변화가 없습니다.

특징:

• 단일 이벤트: Future는 하나의 결과 또는 에러만 반환합니다.
• 결과를 기다림: UI는 Future가 완료되기를 기다리고, 완료된 결과를 바탕으로 빌드합니다.
• 일회성 작업: API 호출, 데이터베이스 조회 등 결과가 한 번 반환되면 더 이상 변화하지 않는 작업에 적합합니다.

사용 예시

FutureBuilder<String>(
  future: fetchData(), // 비동기 작업
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 데이터가 도착할 때까지 로딩 표시
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Result: ${snapshot.data}');
    }
  },
)

2. StreamBuilder

StreamBuilder는 여러 번의 결과가 반환되는 비동기 데이터 흐름을 처리할 때 사용됩니다. Stream은 시간이 지나면서 여러 이벤트를 발생시킬 수 있습니다.

특징:

• 연속적인 이벤트: Stream은 시간이 지나면서 계속해서 데이터를 방출할 수 있습니다. 이는 여러 값이 순차적으로 변경될 수 있는 데이터 스트림에 적합합니다.
• 실시간 업데이트: 데이터 스트림이 갱신될 때마다 UI가 다시 빌드됩니다. 이는 실시간 데이터 업데이트가 필요한 상황에 적합합니다.
• 예시: Firebase Firestore 같은 실시간 데이터베이스, 채팅 앱에서 메시지 스트림 처리, 센서 데이터 읽기 등.

사용 예시

StreamBuilder<int>(
  stream: numberStream(), // 비동기 스트림
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 데이터가 도착할 때까지 로딩 표시
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Number: ${snapshot.data}');
    }
  },
)

주요 차이점

데이터 타입	Future (한 번의 결과를 반환)	Stream (여러 번의 결과를 연속적으로 반환)
갱신	한 번 데이터가 반환된 후 더 이상 갱신되지 않음	새로운 데이터가 도착할 때마다 UI가 자동으로 갱신됨
사용 예시	API 호출, 파일 읽기 등 단일 비동기 작업	Firebase 실시간 데이터, 채팅 메시지, 센서 데이터 등 실시간 작업
결과 처리 방식	Future가 완료된 후 한 번만 빌드	Stream이 데이터를 방출할 때마다 지속적으로 빌드

 

FutureBuilder는 단일 비동기 작업

StreamBuilder는 실시간 데이터나 지속적으로 변경되는 데이터를 처리할 때 사용