add lottie animation for typing indicator

example/lib/main.dart

@@ -227,27 +227,12 @@ class ChannelPage extends StatelessWidget {
       body: Column(
         children: <Widget>[
           Expanded(
-            child: Stack(
+            child: MessageListView(
-              children: <Widget>[
+              threadBuilder: (_, parentMessage) {
-                MessageListView(
+                return ThreadPage(
-                  threadBuilder: (_, parentMessage) {
+                  parent: parentMessage,
-                    return ThreadPage(
+                );
-                      parent: parentMessage,
+              },
-                    );
-                  },
-                ),
-                Positioned.fill(
-                  child: Padding(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 8.0,
-                      vertical: 4,
-                    ),
-                    child: TypingIndicator(
-                      alignment: Alignment.bottomRight,
-                    ),
-                  ),
-                ),
-              ],
             ),
           ),
           MessageInput(),

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.72+74
+version: 1.0.74+76
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/typing_indicator.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
 
@@ -38,10 +39,21 @@ class TypingIndicator extends StatelessWidget {
               ? Align(
                   key: Key('typings'),
                   alignment: alignment,
-                  child: Text(
+                  child: Row(
-                    '${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing...',
+                    mainAxisAlignment: MainAxisAlignment.center,
-                    maxLines: 1,
+                    children: [
-                    style: style,
+                      Lottie.asset(
+                        'animations/typing_dots.json',
+                        package: 'stream_chat_flutter',
+                        alignment: Alignment.center,
+                        height: 4,
+                      ),
+                      Text(
+                        '  ${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing',
+                        maxLines: 1,
+                        style: style,
+                      ),
+                    ],
                   ),
                 )
               : Align(

pubspec.yaml

@@ -32,6 +32,7 @@ dependencies:
   mime: ^0.9.6+3
   visibility_detector: ^0.1.5
   http_parser: ^3.1.4
+  lottie: ^0.7.0+1
   substring_highlight: ^0.1.2
   flutter_slidable: ^0.5.4
   carousel_slider: ^2.2.1
@@ -47,6 +48,7 @@ flutter:
     - images/
     - svgs/
     - lib/svgs/
+    - animations/
 
 dev_dependencies:
   pedantic: ^1.9.0