From e32902d5aa3fe96922ea2852903883b0510aebe6 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Wed, 11 Nov 2020 15:21:00 +0100 Subject: [PATCH] add unread indicator in backbutton --- lib/src/back_button.dart | 65 ++++++++++++++++----------- lib/src/channel_header.dart | 5 ++- lib/src/channel_preview.dart | 4 +- lib/src/channel_unread_indicator.dart | 48 ++++++++++++++++++++ lib/src/unread_indicator.dart | 61 +++++++++++++------------ 5 files changed, 123 insertions(+), 60 deletions(-) create mode 100644 lib/src/channel_unread_indicator.dart diff --git a/lib/src/back_button.dart b/lib/src/back_button.dart index 657a44ef..78b86ae5 100644 --- a/lib/src/back_button.dart +++ b/lib/src/back_button.dart @@ -1,44 +1,57 @@ import 'package:flutter/material.dart'; +import 'package:stream_chat_flutter/src/stream_icons.dart'; +import 'package:stream_chat_flutter/src/unread_indicator.dart'; +import 'package:stream_chat_flutter/stream_chat_flutter.dart'; class StreamBackButton extends StatelessWidget { const StreamBackButton({ Key key, this.onPressed, this.icon = Icons.arrow_back_ios_outlined, + this.showUnreads = false, }) : super(key: key); final VoidCallback onPressed; final IconData icon; + final bool showUnreads; @override Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.all(14.0), - child: RawMaterialButton( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)), - elevation: 0, - highlightElevation: 0, - focusElevation: 0, - disabledElevation: 0, - hoverElevation: 0, - onPressed: () { - if (onPressed != null) { - onPressed(); - } else { - Navigator.of(context).pop(); - } - }, - fillColor: Theme.of(context).brightness == Brightness.dark - ? Colors.white.withOpacity(.1) - : Colors.black.withOpacity(.1), - child: Icon( - icon ?? Icons.arrow_back_ios_outlined, - size: 15, - color: Theme.of(context).brightness == Brightness.dark - ? Colors.white - : Colors.black, + return Stack( + children: [ + Padding( + padding: const EdgeInsets.all(14.0), + child: RawMaterialButton( + shape: + RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)), + elevation: 0, + highlightElevation: 0, + focusElevation: 0, + disabledElevation: 0, + hoverElevation: 0, + onPressed: () { + if (onPressed != null) { + onPressed(); + } else { + Navigator.of(context).pop(); + } + }, + child: Icon( + icon ?? StreamIcons.left, + size: 24, + color: Theme.of(context).brightness == Brightness.dark + ? Colors.white + : Colors.black, + ), + ), ), - ), + if (showUnreads) + Positioned( + top: 7, + right: 7, + child: UnreadIndicator(), + ), + ], ); } } diff --git a/lib/src/channel_header.dart b/lib/src/channel_header.dart index 81f95a87..ee0fd179 100644 --- a/lib/src/channel_header.dart +++ b/lib/src/channel_header.dart @@ -81,7 +81,10 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget { brightness: Theme.of(context).brightness, elevation: 1, leading: showBackButton - ? StreamBackButton(onPressed: onBackPressed) + ? StreamBackButton( + onPressed: onBackPressed, + showUnreads: true, + ) : SizedBox(), backgroundColor: StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color, diff --git a/lib/src/channel_preview.dart b/lib/src/channel_preview.dart index c23d7732..ba3090c2 100644 --- a/lib/src/channel_preview.dart +++ b/lib/src/channel_preview.dart @@ -2,10 +2,10 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:jiffy/jiffy.dart'; import 'package:stream_chat/stream_chat.dart'; -import 'package:stream_chat_flutter/src/unread_indicator.dart'; import '../stream_chat_flutter.dart'; import 'channel_name.dart'; +import 'channel_unread_indicator.dart'; /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_preview.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_preview_paint.png) @@ -80,7 +80,7 @@ class ChannelPreview extends StatelessWidget { e.user.id == channel.client.state.user.id)) { return SizedBox(); } - return UnreadIndicator( + return ChannelUnreadIndicator( channel: channel, ); }), diff --git a/lib/src/channel_unread_indicator.dart b/lib/src/channel_unread_indicator.dart new file mode 100644 index 00000000..8080b1e9 --- /dev/null +++ b/lib/src/channel_unread_indicator.dart @@ -0,0 +1,48 @@ +import 'package:flutter/material.dart'; +import 'package:stream_chat/stream_chat.dart'; +import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; + +class ChannelUnreadIndicator extends StatelessWidget { + const ChannelUnreadIndicator({ + Key key, + @required this.channel, + }) : super(key: key); + + final Channel channel; + + @override + Widget build(BuildContext context) { + return StreamBuilder( + stream: channel.state.unreadCountStream, + initialData: channel.state.unreadCount, + builder: (context, snapshot) { + if (!snapshot.hasData || snapshot.data == 0) { + return SizedBox(); + } + return Material( + borderRadius: BorderRadius.circular(8), + color: StreamChatTheme.of(context) + .channelPreviewTheme + .unreadCounterColor, + child: Padding( + padding: const EdgeInsets.only( + left: 5.0, + right: 5.0, + top: 2, + bottom: 1, + ), + child: Center( + child: Text( + '${snapshot.data}', + style: TextStyle( + fontSize: 11, + color: Colors.white, + ), + ), + ), + ), + ); + }, + ); + } +} diff --git a/lib/src/unread_indicator.dart b/lib/src/unread_indicator.dart index 7e49e202..c9f42fad 100644 --- a/lib/src/unread_indicator.dart +++ b/lib/src/unread_indicator.dart @@ -1,47 +1,46 @@ import 'package:flutter/material.dart'; -import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; +import 'package:stream_chat_flutter/stream_chat_flutter.dart'; class UnreadIndicator extends StatelessWidget { const UnreadIndicator({ Key key, - @required this.channel, }) : super(key: key); - final Channel channel; - @override Widget build(BuildContext context) { + final client = StreamChat.of(context).client; return StreamBuilder( - stream: channel.state.unreadCountStream, - initialData: channel.state.unreadCount, - builder: (context, snapshot) { - if (!snapshot.hasData || snapshot.data == 0) { - return SizedBox(); - } - return Material( - borderRadius: BorderRadius.circular(8), - color: StreamChatTheme.of(context) - .channelPreviewTheme - .unreadCounterColor, - child: Padding( - padding: const EdgeInsets.only( - left: 5.0, - right: 5.0, - top: 2, - bottom: 1, - ), - child: Center( - child: Text( - '${snapshot.data}', - style: TextStyle( - fontSize: 11, - color: Colors.white, - ), + stream: client.state.totalUnreadCountStream, + initialData: client.state.totalUnreadCount, + builder: (context, snapshot) { + if (!snapshot.hasData || snapshot.data == 0) { + return SizedBox(); + } + return Material( + borderRadius: BorderRadius.circular(8), + color: StreamChatTheme.of(context) + .channelPreviewTheme + .unreadCounterColor, + child: Padding( + padding: const EdgeInsets.only( + left: 5.0, + right: 5.0, + top: 2, + bottom: 1, + ), + child: Center( + child: Text( + '${snapshot.data}', + style: TextStyle( + fontSize: 11, + color: Colors.white, ), ), ), - ); - }); + ), + ); + }, + ); } }