add messagelist typing indicator

example/lib/main.dart

@@ -223,17 +223,39 @@ 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(
+              children: <Widget>[
+                MessageListView(
                   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,16 +40,17 @@ class TypingIndicator extends StatelessWidget {
         return AnimatedSwitcher(
           duration: Duration(milliseconds: 300),
           child: snapshot.data?.isNotEmpty == true
-              ? Align(
+              ? Padding(
+                  padding: padding,
+                  child: Align(
                     key: Key('typings'),
                     alignment: alignment,
                     child: Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
+                      mainAxisSize: MainAxisSize.min,
                       children: [
                         Lottie.asset(
                           'animations/typing_dots.json',
                           package: 'stream_chat_flutter',
-                        alignment: Alignment.center,
                           height: 4,
                         ),
                         Text(
@@ -55,6 +60,7 @@ class TypingIndicator extends StatelessWidget {
                         ),
                       ],
                     ),
+                  ),
                 )
               : Align(
                   key: Key('alternative'),