diff --git a/example/lib/main.dart b/example/lib/main.dart index 991f79ad..f1263fb8 100644 --- a/example/lib/main.dart +++ b/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: [ Expanded( - child: MessageListView( - threadBuilder: (_, parentMessage) { - return ThreadPage( - parent: parentMessage, - ); - }, + child: Stack( + children: [ + 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(), diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 7c76b15f..02c2c726 100644 --- a/example/pubspec.yaml +++ b/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" diff --git a/lib/src/channel_header.dart b/lib/src/channel_header.dart index 267ee20b..ebaaf20f 100644 --- a/lib/src/channel_header.dart +++ b/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, diff --git a/lib/src/channel_info.dart b/lib/src/channel_info.dart index 402dd73f..208fa588 100644 --- a/lib/src/channel_info.dart +++ b/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, diff --git a/lib/src/typing_indicator.dart b/lib/src/typing_indicator.dart index 7a3ad359..b13eade6 100644 --- a/lib/src/typing_indicator.dart +++ b/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( - key: Key('typings'), - alignment: alignment, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - 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, - ), - ], + ? 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(