Futurebuilder Streambuilder 사용법 및 차이점

Flutter 애플리케이션 개발에서 비동기 데이터를 처리하는 두 가지 중요한 위젯이 있습니다. FutureBuilder StreamBuilder입니다. 이 글에서는 두 위젯의 차이점과 용도를 비교하여 어떤 상황에서 어떤 위젯을 사용하는 것이 더 적합한지 설명합니다.

FutureBuilder: 한 번의 비동기 작업 처리

FutureBuilder는 단 한 번의 비동기 작업을 처리할 때 주로 사용됩니다. 예를 들어, 원격 API 호출이나 데이터베이스 조회와 같은 작업입니다. FutureBuilder는 Future 객체를 감시하고, 해당 Future가 완료되면 결과를 UI에 반영합니다.

import 'package:flutter/material.dart';

class FutureBuilderExample extends StatelessWidget {
  final Future<String> _fetchData = Future<String>.delayed(
    Duration(seconds: 2),
    () => "Future data loaded",
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FutureBuilder Example")),
      body: Center(
        child: FutureBuilder<String>(
          future: _fetchData,
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text("Error: ${snapshot.error}");
            } else {
              return Text(snapshot.data ?? "No data");
            }
          },
        ),
      ),
    );
  }
}

StreamBuilder: 지속적인 데이터 변경 처리

StreamBuilder는 지속적으로 데이터가 변경되는 경우에 매우 유용합니다. 주로 사용되는 예는 데이터베이스 변경 사항을 실시간으로 반영하거나 소켓을 통해 받은 데이터를 처리할 때입니다. StreamBuilder는 Stream 객체를 감시하고, 새로운 데이터가 들어올 때마다 UI를 업데이트합니다.

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

class StreamBuilderExample extends StatelessWidget {
  final StreamController<int> _streamController = StreamController<int>();

  StreamBuilderExample() {
    Timer.periodic(Duration(seconds: 1), (Timer timer) {
      _streamController.sink.add(timer.tick);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("StreamBuilder Example")),
      body: Center(
        child: StreamBuilder<int>(
          stream: _streamController.stream,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text("Error: ${snapshot.error}");
            } else {
              return Text("Tick: ${snapshot.data}");
            }
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _streamController.close();
  }
}

마무리

정리를 해보자면 API 호출 또는 한 번의 데이터 획득할때는 FutureBuilder 사용하고 실시간 데이터 업데이트 또는 지속적인 데이터 변경 사항 StreamBuilder 사용합니다.