Fixed code in the overlapping chat with transparency docs

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(
+class MyApp extends StatelessWidget {
-  body: Stack(
+  const MyApp({
-    children: <Widget>[
+    Key? key,
-      // Add your video implementation here
+    required this.client,
-      ShaderMask(
+    required this.channel,
-        shaderCallback: (rect) {
+  }) : super(key: key);
-          return LinearGradient(
+
-            begin: Alignment.bottomCenter,
+  final StreamChatClient client;
-            end: Alignment.topCenter,
+
-           colors: [Colors.black, Colors.transparent],
+  final Channel channel;
-           stops: [0.4, 0.65]
+
-          ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
+  @override
-        },
+  Widget build(BuildContext context) => MaterialApp(
-       blendMode: BlendMode.dstIn,
+        theme: ThemeData.light(),
-         child: Column(
+        darkTheme: ThemeData.dark(),
-           children: [
+        builder: (context, widget) => StreamChat(
-             Expanded(
+          client: client,
-               child: MessageListView(),
+          child: widget,
-             ),
+          streamChatThemeData: StreamChatThemeData().copyWith(
-             MessageInput(),
+            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(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
 ```