Всем привет. Добро пожаловать в мой туториал из серии Riverpod. В моем предыдущем уроке мы говорили о FutureProvider. Надеюсь, моя статья не заставит вас запутаться в понимании этого замечательного управления состоянием, Riverpod. Ха-ха. Хорошо, сегодня мы узнаем о других возможностях Riverpod, StreamProvider.

Первый вопрос: зачем нам изучать StreamProvider, если наше приложение может использовать FutureProvider для взаимодействия с нашими динамическими данными? В некоторых случаях нам нужно сделать наше приложение более реактивным, даже когда пользователь не взаимодействует с ним. Вот почему мы используем StreamProvider.

StreamProvider обычно используется для:

прослушивание Firebase или веб-сокетов

пересборка другого провайдера каждые несколько секунд

Мы можем прослушивать любые обновления нашего приложения с помощью StreamProvider. Используя StreamProvider, мы получим удивительные преимущества, как то, что Riverpod говорит ниже:

Использование StreamProvider поверх StreamBuilder имеет множество преимуществ:

это позволяет другим провайдерам слушать поток с помощью ref.watch.

он гарантирует правильную обработку случаев загрузки и ошибок благодаря AsyncValue.

это устраняет необходимость отличать широковещательные потоки от обычных потоков.

он кэширует последнее значение, отправленное потоком, гарантируя, что если прослушиватель будет добавлен после того, как событие будет отправлено, слушатель все равно будет иметь немедленный доступ к самому последнему событию.

это позволяет легко имитировать поток во время тестов, переопределяя StreamProvider.

Потрясающий! Хорошо, думаю, я ясно рассказал вам о StreamProvider. Давай попробуем!

Во-первых, давайте создадим простой экран, который мы можем использовать в качестве демонстрации StreamProvider.

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

class StreamScreen extends ConsumerStatefulWidget {
  const StreamScreen({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _StreamScreenState();
}

class _StreamScreenState extends ConsumerState<StreamScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stream Provider'),
      ),
    );
  }
}

Да, это очень простой код нашего экрана витрины. Я думаю, это не имеет значения. Ха-ха. Следующим шагом мы создадим наш StreamProvider. Сначала я покажу вам свой код, а потом объясню.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final streamProvider = StreamProvider<int>((ref) {
  return Stream.periodic(
    const Duration(seconds: 1),
    (computationCount) => computationCount,
  ).take(10);
});

Выше мы попытаемся передать наши данные (int). В этом случае я использую Stream.periodic для отправки нашего события с указанными интервалами. Приведенный выше код увеличивает это значение до 9. Отлично. Как мы можем использовать на нашем экране? Просто, давайте вернемся к нашему экрану витрины.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:futureprovider/stream_provider/stream_controller.dart';

class StreamScreen extends ConsumerStatefulWidget {
  const StreamScreen({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _StreamScreenState();
}

class _StreamScreenState extends ConsumerState<StreamScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stream Provider'),
      ),
      body: ref.watch(streamProvider).when(
          data: (data) => Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      'Stream Provider is Work!',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    Text(
                      data.toString(),
                      style: const TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ],
                ),
              ),
          error: (error, stackTrace) {
            return const SizedBox();
          },
          loading: () => const Center(
                child: CircularProgressIndicator(),
              )),
    );
  }
}

Это наш окончательный код. Используя StreamProvider, мы можем использовать ref.watch на нашем экране. Это потрясающие преимущества, которые мы получили от StreamProvider. Давайте запустим наш код и увидим наш StreamProvider.

Хорошо, я думаю, мы ясно поговорили о StreamProvider. Надеюсь, вы понимаете, как работает StreamProvider. Если у вас есть какие-либо вопросы о нашем сегодняшнем уроке, пожалуйста, пришлите мне о своем замешательстве, я всегда рад вашим отзывам. Спасибо за чтение. До встречи на другом уроке! #HappyLearningHappyCoding