add messagelist typing indicator

example/lib/main.dart

@@ -223,16 +223,38 @@ class ChannelPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: ChannelHeader(),
+      appBar: ChannelHeader(
+        showTypingIndicator: false,
+      ),
       body: Column(
         children: <Widget>[
           Expanded(
-            child: MessageListView(
+            child: Stack(
-              threadBuilder: (_, parentMessage) {
+              children: <Widget>[
-                return ThreadPage(
+                MessageListView(
-                  parent: parentMessage,
+                  threadBuilder: (_, parentMessage) {
-                );
+                    return ThreadPage(
-              },
+                      parent: parentMessage,
+                    );
+                  },
+                ),
+                Positioned(
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  child: Container(
+                    alignment: Alignment.centerLeft,
+                    color: Color(0xffFCFCFC).withOpacity(.9),
+                    child: TypingIndicator(
+                      alignment: Alignment.centerLeft,
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 4,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
             ),
           ),
           MessageInput(),

example/pubspec.yaml

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

lib/src/channel_header.dart

@@ -64,12 +64,16 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   /// Callback to call when the image is tapped.
   final VoidCallback onImageTap;
 
+  /// If true the typing indicator will be rendered if a user is typing
+  final bool showTypingIndicator;
+
   /// Creates a channel header
   ChannelHeader({
     Key key,
     this.showBackButton = true,
     this.onBackPressed,
     this.onTitleTap,
+    this.showTypingIndicator = true,
     this.onImageTap,
   })  : preferredSize = Size.fromHeight(kToolbarHeight),
         super(key: key);
@@ -116,6 +120,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
               ),
               SizedBox(height: 2),
               ChannelInfo(
+                showTypingIndicator: showTypingIndicator,
                 channel: channel,
                 textStyle:
                     StreamChatTheme.of(context).channelPreviewTheme.subtitle,

lib/src/channel_info.dart

@@ -8,10 +8,14 @@ class ChannelInfo extends StatelessWidget {
   /// The style of the text displayed
   final TextStyle textStyle;
 
+  /// If true the typing indicator will be rendered if a user is typing
+  final bool showTypingIndicator;
+
   const ChannelInfo({
     Key key,
     @required this.channel,
     this.textStyle,
+    this.showTypingIndicator = true,
   }) : super(key: key);
 
   @override
@@ -75,6 +79,10 @@ class ChannelInfo extends StatelessWidget {
       }
     }
 
+    if (!showTypingIndicator) {
+      return alternativeWidget;
+    }
+
     return TypingIndicator(
       alignment: Alignment.center,
       alternativeWidget: alternativeWidget,

lib/src/typing_indicator.dart

@@ -12,6 +12,7 @@ class TypingIndicator extends StatelessWidget {
     this.alternativeWidget,
     this.style,
     this.alignment = Alignment.centerLeft,
+    this.padding = const EdgeInsets.all(0),
   }) : super(key: key);
 
   /// Style of the text widget
@@ -23,6 +24,9 @@ class TypingIndicator extends StatelessWidget {
   /// Widget built when no typings is happening
   final Widget alternativeWidget;
 
+  /// The padding of this widget
+  final EdgeInsets padding;
+
   final Alignment alignment;
 
   @override
@@ -36,24 +40,26 @@ class TypingIndicator extends StatelessWidget {
         return AnimatedSwitcher(
           duration: Duration(milliseconds: 300),
           child: snapshot.data?.isNotEmpty == true
-              ? Align(
+              ? Padding(
-                  key: Key('typings'),
+                  padding: padding,
-                  alignment: alignment,
+                  child: Align(
-                  child: Row(
+                    key: Key('typings'),
-                    mainAxisAlignment: MainAxisAlignment.center,
+                    alignment: alignment,
-                    children: [
+                    child: Row(
-                      Lottie.asset(
+                      mainAxisSize: MainAxisSize.min,
-                        'animations/typing_dots.json',
+                      children: [
-                        package: 'stream_chat_flutter',
+                        Lottie.asset(
-                        alignment: Alignment.center,
+                          'animations/typing_dots.json',
-                        height: 4,
+                          package: 'stream_chat_flutter',
-                      ),
+                          height: 4,
-                      Text(
+                        ),
-                        '  ${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing',
+                        Text(
-                        maxLines: 1,
+                          '  ${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing',
-                        style: style,
+                          maxLines: 1,
-                      ),
+                          style: style,
-                    ],
+                        ),
+                      ],
+                    ),
                   ),
                 )
               : Align(