StreamBuilder

하요·2024년 6월 21일

Flutter Widget of the Week

목록 보기

16/18

Flutter에서 실시간 데이터 처리하기: StreamBuilder

비동기 데이터 스트림을 관리하는 것은 Flutter 애플리케이션에서 중요한 작업입니다. StreamBuilder 위젯은 실시간 데이터를 처리하고 이러한 비동기 데이터 스트림을 간단하게 처리하고, 새로운 데이터가 스트림에 도착할 때마다 UI를 자동으로 업데이트합니다.

주요 속성

stream: 스트림을 제공하는 Stream 객체입니다. 스트림의 데이터가 변경될 때마다 빌드 메서드가 호출됩니다.
builder: 스트림에서 새로운 데이터가 수신될 때마다 호출되는 콜백 함수입니다. BuildContext와 AsyncSnapshot을 인자로 받습니다.
initialData: 스트림에 데이터가 아직 도착하지 않았을 때 사용할 초기 데이터입니다.

주요 활용도

실시간 데이터 업데이트: 실시간으로 변하는 데이터를 UI에 반영해야 하는 경우, 예를 들어 채팅 애플리케이션, 주식 시세 업데이트 등에서 활용됩니다.
비동기 데이터 처리: 서버로부터 데이터를 비동기적으로 받아와서 화면에 표시하는 경우에 유용합니다.
상태 관리: 비동기적인 상태 관리를 위해 사용됩니다. Stream을 통해 상태를 관리하고, StreamBuilder를 통해 UI를 업데이트할 수 있습니다.
다양한 이벤트 처리: Firebase 데이터베이스 업데이트, 센서 이벤트, 네트워크 연결 상태 등 다양한 실시간 이벤트를 처리하는 데 사용됩니다.

스트림 관리

스트림은 State.initState, State.didUpdateWidget, 또는 State.didChangeDependencies에서 미리 획득되어야 합니다. State.build 또는 StatelessWidget.build 메서드 호출 시 스트림을 생성하면 안 됩니다. 스트림과 StreamBuilder를 동시에 생성하면 부모 위젯이 다시 빌드될 때마다 비동기 작업이 재시작됩니다.

일반적인 지침은 모든 빌드 메서드가 매 프레임마다 호출될 수 있다고 가정하고, 생략된 호출을 최적화로 처리하는 것입니다.

타이밍

위젯 재빌드는 각 상호작용에 의해 State.setState를 사용하여 예약되지만, 스트림의 타이밍과는 별개로 처리됩니다. 빌더는 Flutter 파이프라인의 재량에 따라 호출되며, 스트림과의 상호작용을 나타내는 스냅샷의 타이밍 종속 하위 시퀀스를 받습니다.

코드 예제

아래 예제는 StreamBuilder를 사용하여 스트림으로부터 데이터를 받아와서 화면에 표시하는 방법을 보여줍니다.

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StreamBuilder 예제')),
        body: Center(
          child: DataStreamWidget(),
        ),
      ),
    );
  }
}

class DataStreamWidget extends StatelessWidget {
  final Stream<int> _dataStream = (() async* {
    for (int i = 0; i < 10; i++) {
      await Future.delayed(Duration(seconds: 1));
      yield i;
    }
  })();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: _dataStream,
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else if (!snapshot.hasData) {
          return Text('No data');
        } else {
          return Text('Data: ${snapshot.data}');
        }
      },
    );
  }
}

추가 팁

초기 데이터 설정: initialData 속성을 사용하여 스트림의 데이터가 아직 도착하지 않았을 때 사용할 기본 데이터를 설정할 수 있습니다.
에러 처리: AsyncSnapshot의 hasError 속성과 error 속성을 사용하여 스트림에서 발생한 에러를 처리할 수 있습니다.
연결 상태 확인: AsyncSnapshot의 connectionState 속성을 사용하여 스트림의 현재 연결 상태를 확인하고, 이에 따라 UI를 다르게 표시할 수 있습니다.