Add an example for StreamProvider #2004

website/docs/providers/stream_provider.mdx

@@ -7,6 +7,8 @@ import TabItem from "@theme/TabItem";
 import CodeBlock from "@theme/CodeBlock";
 import configProvider from "!!raw-loader!/docs/providers/future_provider/config_provider.dart";
 import configConsumer from "!!raw-loader!/docs/providers/future_provider/config_consumer.dart";
+import streamProvider from "!!raw-loader!/docs/providers/stream_provider/live_stream_chat_provider.dart";
+import streamConsumer from "!!raw-loader!/docs/providers/stream_provider/live_stream_chat_consumer.dart";
 import { trimSnippet } from "../../src/components/CodeSnippet";
 
 `StreamProvider` is similar to [FutureProvider] but for [Stream]s instead of
@@ -42,3 +44,14 @@ Using `StreamProvider` over [StreamBuilder] has numerous benefits:
 [stream.periodic]: https://api.dart.dev/stable/2.15.1/dart-async/Stream/Stream.periodic.html
 [family]: ../concepts/modifiers/family
 [streambuilder]: https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
+
+## Usage example: listening live chats from server
+
+`StreamProvider` is used in when we handle stream of asynchronous data
+such as Video Streaming, Weather broadcasting Apis.
+
+<CodeBlock>{trimSnippet(streamProvider)}</CodeBlock>
+
+Then, the UI can listen to live streaming chats like so:
+
+<CodeBlock>{trimSnippet(streamConsumer)}</CodeBlock>

website/docs/providers/stream_provider/live_stream_chat_consumer.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'live_stream_chat_provider.dart';
+
+/* SNIPPET START */
+// UI part is same as like Future provider
+Widget build(BuildContext context, WidgetRef ref) {
+  final liveChats = ref.watch(liveStreamProvider);
+  return liveChats.when(
+    loading: () => const CircularProgressIndicator(),
+    error: (error, stackTrace) => Text(error.toString()),
+    data: (msgs) {
+      return Text(msgs);
+    },
+  );
+}

website/docs/providers/stream_provider/live_stream_chat_provider.dart

@@ -0,0 +1,26 @@
+import 'dart:async';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/* SNIPPET START */
+// Fake chats as data sorce
+// Error last index is represent error which type is not a string
+const fakeChats = ['John Hi', 'Flutter is Cute', 1];
+
+// stream provider
+final liveStreamProvider = StreamProvider((ref) {
+  return liveStreamChat();
+});
+// fake chats come as Stream
+Stream<String> liveStreamChat() async* {
+  for (var i = 0; i < fakeChats.length; i++) {
+// Wait for a second
+    yield await Future.delayed(const Duration(seconds: 1));
+    try {
+      // yield chats
+      yield fakeChats[i] as String;
+    } catch (error) {
+      // handling error
+      yield* Stream.error(error);
+    }
+  }
+}