Merge pull request #152 from GetStream/feature/typingAnimation

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

@@ -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';
 
@@ -11,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
@@ -22,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
@@ -35,13 +40,26 @@ class TypingIndicator extends StatelessWidget {
         return AnimatedSwitcher(
           duration: Duration(milliseconds: 300),
           child: snapshot.data?.isNotEmpty == true
-              ? Align(
-                  key: Key('typings'),
-                  alignment: alignment,
-                  child: Text(
-                    '${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing...',
-                    maxLines: 1,
-                    style: style,
+              ? Padding(
+                  padding: padding,
+                  child: Align(
+                    key: Key('typings'),
+                    alignment: alignment,
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Lottie.asset(
+                          'animations/typing_dots.json',
+                          package: 'stream_chat_flutter',
+                          height: 4,
+                        ),
+                        Text(
+                          '  ${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing',
+                          maxLines: 1,
+                          style: style,
+                        ),
+                      ],
+                    ),
                   ),
                 )
               : Align(