From 7056fa6280077ef09f0f55969cce5c798c205528 Mon Sep 17 00:00:00 2001
From: Ayush Shekhar <ayush221b@gmail.com>
Date: Fri, 15 Apr 2022 10:31:08 +0530
Subject: [PATCH] Fixed code in the overlapping chat with transparency docs

---
 .../adding_chat_to_video_livestreams.mdx      | 98 +++++++++++++------
 1 file changed, 70 insertions(+), 28 deletions(-)

diff --git a/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx b/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx
index 9e2afb44..72eddc2a 100644
--- a/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx
+++ b/docusaurus/docs/Flutter/guides/adding_chat_to_video_livestreams.mdx
@@ -61,33 +61,75 @@ The second type looks like this:
 
 ![](../assets/live_stream_2.jpg)
 
-We can use a `Stack` for achieving this:
+We can use a `Stack` for achieving this, here's a complete working implementation:
 
 ```dart
-Scaffold(
-  body: Stack(
-    children: <Widget>[
-      // Add your video implementation here
-      ShaderMask(
-        shaderCallback: (rect) {
-          return LinearGradient(
-            begin: Alignment.bottomCenter,
-            end: Alignment.topCenter,
-           colors: [Colors.black, Colors.transparent],
-           stops: [0.4, 0.65]
-          ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
-        },
-       blendMode: BlendMode.dstIn,
-         child: Column(
-           children: [
-             Expanded(
-               child: MessageListView(),
-             ),
-             MessageInput(),
-           ],
-         ),
-       ),
-     ],
-   ),
- )
-```
+class MyApp extends StatelessWidget {
+  const MyApp({
+    Key? key,
+    required this.client,
+    required this.channel,
+  }) : super(key: key);
+
+  final StreamChatClient client;
+
+  final Channel channel;
+
+  @override
+  Widget build(BuildContext context) => MaterialApp(
+        theme: ThemeData.light(),
+        darkTheme: ThemeData.dark(),
+        builder: (context, widget) => StreamChat(
+          client: client,
+          child: widget,
+          streamChatThemeData: StreamChatThemeData().copyWith(
+            messageListViewTheme: const MessageListViewThemeData(
+              backgroundColor: Colors.transparent,
+            ),
+          ),
+        ),
+        home: StreamChannel(
+          channel: channel,
+          child: const ChannelPage(),
+        ),
+      );
+}
+
+class ChannelPage extends StatelessWidget {
+  const ChannelPage({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.transparent,
+      body: Stack(
+        children: <Widget>[
+          // Add your video implementation here
+          ShaderMask(
+            shaderCallback: (rect) {
+              return const LinearGradient(
+                  begin: Alignment.bottomCenter,
+                  end: Alignment.topCenter,
+                  colors: [Colors.black, Colors.transparent],
+                  stops: [0.4, 0.8]).createShader(
+                Rect.fromLTRB(0, 0, rect.width, rect.height),
+              );
+            },
+            blendMode: BlendMode.dstIn,
+            child: Column(
+              children: const [
+                Expanded(
+                  child: MessageListView(),
+                ),
+                MessageInput(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
\ No newline at end of file