Merge pull request #152 from GetStream/feature/typingAnimation

example/lib/main.dart

@@ -215,7 +215,9 @@ class ChannelPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: ChannelHeader(),
+      appBar: ChannelHeader(
+        showTypingIndicator: false,
+      ),
       body: Column(
         children: <Widget>[
           Expanded(
@@ -228,14 +230,19 @@ class ChannelPage extends StatelessWidget {
                     );
                   },
                 ),
-                Positioned.fill(
+                Positioned(
-                  child: Padding(
+                  bottom: 0,
-                    padding: const EdgeInsets.symmetric(
+                  left: 0,
-                      horizontal: 8.0,
+                  right: 0,
-                      vertical: 4,
+                  child: Container(
-                    ),
+                    alignment: Alignment.centerLeft,
+                    color: Color(0xffFCFCFC).withOpacity(.9),
                     child: TypingIndicator(
-                      alignment: Alignment.bottomRight,
+                      alignment: Alignment.centerLeft,
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 4,
+                      ),
                     ),
                   ),
                 ),

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(
+              ? Padding(
-                  key: Key('typings'),
+                  padding: padding,
-                  alignment: alignment,
+                  child: Align(
-                  child: Text(
+                    key: Key('typings'),
-                    '${snapshot.data.map((u) => u.name).join(',')} ${snapshot.data.length == 1 ? 'is' : 'are'} typing...',
+                    alignment: alignment,
-                    maxLines: 1,
+                    child: Row(
-                    style: style,
+                      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(

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