[flutter] useStream 훅 위젯의 사용법과 예제

21 Dec 2023

flutter

Flutter 2.5.0 버전에서 도입된 useStream 훅을 사용하면 Flutter 앱에서 스트림을 쉽게 구독하고 스트림의 데이터를 사용할 수 있습니다. 이 기능을 사용하여 앱의 상태를 업데이트하고 화면을 다시 그릴 수 있습니다.

1. useStream 훅이란?

useStream 훅은 Flutter의 useState나 useEffect와 같은 훅입니다. 스트림을 간단하게 구독하고, 해당 스트림이 방출하는 값을 추적하며 앱 상태를 변경할 수 있습니다.

2. useStream 훅의 사용법

useStream 훅을 사용하려면 다음과 같이 사용합니다.

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final stream = BehaviorSubject<int>();

    useEffect(() {
      //... 스트림을 처리하는 비즈니스 로직
      return () {
        stream.close();
      };
    }, []);

    final data = useStream(stream.stream, initialData: 0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('useStream 훅 예제'),
        ),
        body: Center(
          child: Text('스트림 값: ${data.data}'),
        ),
      ),
    );
  }
}

위의 예제에서는 useStream 훅을 사용하여 stream의 값을 data 변수에 넣었습니다. 그리고 해당 값을 화면에 출력하고 있습니다.

3. useStream 훅의 예제

다음은 useStream 훅을 사용한 예제입니다. 예제에서는 주기적으로 값을 방출하는 Counter 클래스를 만들고, 해당 값을 useStream 훅을 통해 받아 화면에 출력하는 기능을 구현합니다.

class Counter {
  Stream<int> get stream => Stream.periodic(const Duration(seconds: 1), (i) => i).take(10);
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useMemoized(() => Counter());
    final data = useStream(counter.stream, initialData: 0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('useStream 훅 예제'),
        ),
        body: Center(
          child: Text('Counter 값: ${data.data}'),
        ),
      ),
    );
  }
}

위의 예제에서는 Counter 클래스를 정의하여 1초마다 값을 방출하는 stream을 만들었습니다. 그리고 useStream 훅을 통해 해당 값을 받아와 화면에 출력하고 있습니다.

이처럼 useStream 훅을 사용하면 간편하게 스트림을 구독하고 값을 활용할 수 있습니다.

4. 결론

useStream 훅은 Flutter에서 스트림을 구독하고 값을 추적하여 사용하는 데 효율적이고 간편한 방법을 제공합니다. 이를 통해 앱의 상태를 업데이트하고 화면을 다시 그리는 등의 작업을 간단히 처리할 수 있습니다.

참고:

https://api.flutter.dev/flutter_hooks/useStream-class.html
https://pub.dev/packages/flutter_hooks