[Flutter] StreamProvider

① screen/stream_provider_screen.dart 파일 생성

② HomeScreen에 ElevatedButton 추가하기

③ provider 만들기
riverpod/stream_provider.dart 파일 생성하기

③-1. 반환해 줄 제너릭 넣어주기
난 List 형태의 int 값을 반환해줄거임~

③-2. async* 해주기
stream은 async* , await, yield 짝궁인 거 잊지말자!

• stream_provider.dart 코드

import 'package:flutter_riverpod/flutter_riverpod.dart';

final multipleStreamProvider = StreamProvider<List<int>>((ref) async* {
  for (int i = 0; i < 10; i++) {
    // 1초 기다리기 
    await Future.delayed(
      const Duration(seconds: 1),
    );
    // length는 3개 만들건데...
    // 뭘 만들거냐면 각 index별로 i랑 곱한 값을 만들거임! 
    yield List.generate(3, (index) => index + i);
  }
});

④ StreamProviderScreen 코드 수정하기

④-1. StatelessWidget → ConsumerWidget 으로 수정
④-2. build 함수에 WidgetRef ref 파라미터 추가

⑤ ref.watch 해주기

그럼 이제 state를 그대로 다 받아올 수 있음!

• stream_provider_screen.dart 코드

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_study/layout/defalut_layout.dart';
import 'package:riverpod_study/riverpod/stream_provider.dart';

class StreamProviderScreen extends ConsumerWidget {
  const StreamProviderScreen({super.key});

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

    return const DefalutLayout(
      title: 'StreamProviderScreen',
      body: Column(
        children: [],
      ),
    );
  }
}

⑥ .when 작성하기
Column 지우고 Center로 바꿔주고...

• stream_provider_screen.dart 코드

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_study/layout/defalut_layout.dart';
import 'package:riverpod_study/riverpod/stream_provider.dart';

class StreamProviderScreen extends ConsumerWidget {
  const StreamProviderScreen({super.key});

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

    return DefalutLayout(
      title: 'StreamProviderScreen',
      body: Center(
        child: state.when(
          data: (data) => Text(
            data.toString(),
          ),
          error: (err, stack) => Text(
            err.toString(),
          ),
          loading: () => const CircularProgressIndicator(),
        ),
      ),
    );
  }
}

---

여기까지 된 걸 확인해보자!

로딩되고 난 후에 1초마다 숫자가 바뀌는 걸 볼 수 있음.