[Flutter] 플러터 #19 - StreamProvider

StreamProvider에 대하여 알아보겠습니다.

 Flutter에서의 상태 관리를 위해 Riverpod 패키지는 StreamProvider를 제공합니다. StreamProvider는 비동기 스트림을 제공하는 Provider입니다. 이를 통해 앱에서 스트림을 손쉽게 구독하고, 스트림의 데이터 변화에 따라 UI를 업데이트할 수 있습니다.

 

StreamProvider의 장점은 다음과 같습니다:

1.  간편한 스트림 관리: StreamProvider를 사용하면 스트림의 상태와 데이터를 편리하게 관리할 수 있습니다. 스트림의 변화를 감지하고, 변화에 따라 UI를 업데이트할 수 있습니다.
2. 데이터 공유: StreamProvider를 통해 한 번의 스트림 생성으로 여러 위젯들과 데이터를 공유할 수 있습니다. 다른 위젯에서 스트림에 접근하여 동일한 데이터를 사용하고, 데이터의 변화를 실시간으로 반영할 수 있습니다.
3. 확장성과 유연성: StreamProvider는 다양한 비동기 작업을 처리할 수 있으며, 여러 개의 스트림을 동시에 제공할 수도 있습니다. 이를 통해 앱의 기능을 확장하고, 복잡한 비동기 작업을 관리할 수 있습니다.

StreamProvider의 예시를 코드로 알아보겠습니다.

먼저 StreamProvider를 정의하는 코드입니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final multipleStreamProvider = StreamProvider<List<int>>((ref) async*{
  // 여기는 걍 다른 프로바이더랑 똑같은데 이런게 있구나 하고 넘어가면 OK
  for (int i = 0; i < 10; i++) {
    await Future.delayed(Duration(seconds: 1));

    yield List.generate(3, (index) => index * i);
  }
});

 multipleStreamProvider는 StreamProvider를 정의하는 변수입니다. 이 Provider는 List<int> 형태의 스트림을 생성하고 제공합니다. 스트림은 async* 키워드로 비동기적으로 생성됩니다. for 루프를 사용하여 0부터 9까지 반복하면서 1초마다 값을 방출하고, List.generate를 사용하여 각 반복에 대한 리스트를 생성합니다. 이렇게 생성된 리스트는 yield를 통해 스트림으로 방출됩니다.

 

다음은 StreamProvider를 사용한 코드입니다.

import 'package:ex_state/riverpod/stream_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 다른 스크린이랑 똑같이 consumerwidget으로 선언하고 WidgetRef ref 선언하기
class StreamProviderScreen extends ConsumerWidget {
  const StreamProviderScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(multipleStreamProvider);

    return DefaultLayout(
      title: 'StreamProviderScreen',
      body: Center(
        // 똑같이 state.when 으로 data, error, loading 구분하기
        child: state.when(
          data: (data) => Text(
            data.toString(),
          ),
          error: (err, stack) => Text(
            err.toString(),
          ),
          loading: () => CircularProgressIndicator(),
        ),
      ),
    );
  }
}

 StreamProviderScreen은 ConsumerWidget을 상속하는 위젯으로, multipleStreamProvider를 구독합니다. WidgetRef ref를 사용하여 ref.watch를 호출하여 스트림 프로바이더의 상태를 감시합니다.

 state.when을 사용하여 스트림 프로바이더의 상태를 처리합니다. 데이터가 있을 때는 data 콜백이 호출되어 데이터를 출력하고, 에러가 발생한 경우 error 콜백이 호출되어 에러 메시지를 출력합니다. 스트림이 로딩 중일 때는 loading 콜백이 호출되어 로딩 인디케이터를 표시합니다.

 StreamProvider의 역할은 비동기 작업을 처리하고, 스트림의 데이터를 UI에 반영하는 것입니다. StreamProvider를 사용하여 앱의 상태를 관리하면 UI를 업데이트하는 데 필요한 데이터를 간단하게 제공할 수 있습니다. 스트림의 데이터 변화를 감지하고, UI를 실시간으로 업데이트함으로써 앱의 사용자 경험을 향상시킬 수 있습니다.

 

실행결과화면입니다.

 실행 결과로는 스트림에서 방출된 데이터가 화면에 출력됩니다. 스트림의 데이터가 변하면 state.when을 통해 데이터를 출력하며, 스트림이 로딩 중인 경우에는 로딩 인디케이터를 표시합니다. 스트림에 에러가 발생한 경우에는 에러 메시지를 출력합니다.

 스트림은 1초마다 값이 방출되므로, 0부터 9까지의 값을 갖는 리스트가 10번 방출됩니다. 각 방출마다 UI가 업데이트되어 데이터가 출력됩니다.

 

 StreamProvider는 비동기 스트림을 손쉽게 관리하고, UI를 업데이트하는 데 유용합니다. 데이터의 변화에 따라 실시간으로 UI를 갱신하고, 앱의 상태를 관리할 수 있습니다.