added new guide

2021-07-29 18:22:55 +05:30
parent 3c48e70108
commit 2e1bd3d2be
3 changed files with 76 additions and 0 deletions
@@ -0,0 +1,76 @@
+---
+id: adding_chat_to_video_livestreams
+sidebar_position: 7
+title: Adding Chat To Video Livestreams
+---
+
+Adding Chat To Video Livestreams
+
+### Introduction
+
+There are two common scenarios in live-streaming applications. Let's explore creating both types:
+
+### Split-screen
+
+In the split-screen implementation, we have a visual split between the video and the message list.
+
+![](../assets/live_stream_1.jpg)
+
+```
+Scaffold(
+  body: Column(
+    children: <Widget>[
+      Expanded(
+        child: // Your video implementation here,
+      ),
+      Expanded(
+        child: Column(
+          children: [
+           Expanded(
+             child: MessageListView(),
+           ),
+           MessageInput(),
+          ],
+        ),
+      ),
+    ],
+  ),
+)
+```
+
+### Overlapping chat with a transparency gradient
+
+The second type looks like this:
+
+![](../assets/live_stream_2.jpg)
+
+We can use a `Stack` for achieving this:
+
+```
+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(),
+           ],
+         ),
+       ),
+     ],
+   ),
+ )
+```