From f93430b11d956533282444b1df242987e55d0177 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 27 Feb 2020 10:37:44 +0100 Subject: [PATCH] add header --- example/lib/custom_message.dart | 1 + example/lib/customize_channel_preview.dart | 1 + example/lib/multiple_conversation.dart | 1 + example/lib/single_conversation.dart | 1 + example/lib/threads.dart | 1 + lib/src/channel_header.dart | 94 ++++++++++++++++++++++ lib/src/channel_image.dart | 27 ++++--- lib/src/channel_name.dart | 17 ++-- lib/stream_chat_flutter.dart | 1 + 9 files changed, 127 insertions(+), 17 deletions(-) create mode 100644 lib/src/channel_header.dart diff --git a/example/lib/custom_message.dart b/example/lib/custom_message.dart index 56ffce7c..f99e9fbe 100644 --- a/example/lib/custom_message.dart +++ b/example/lib/custom_message.dart @@ -47,6 +47,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + appBar: ChannelHeader(), body: Column( children: [ Expanded( diff --git a/example/lib/customize_channel_preview.dart b/example/lib/customize_channel_preview.dart index d44ae48f..db970b1d 100644 --- a/example/lib/customize_channel_preview.dart +++ b/example/lib/customize_channel_preview.dart @@ -65,6 +65,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + appBar: ChannelHeader(), body: Column( children: [ Expanded( diff --git a/example/lib/multiple_conversation.dart b/example/lib/multiple_conversation.dart index 64466191..1d1977d8 100644 --- a/example/lib/multiple_conversation.dart +++ b/example/lib/multiple_conversation.dart @@ -47,6 +47,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + appBar: ChannelHeader(), body: Column( children: [ Expanded( diff --git a/example/lib/single_conversation.dart b/example/lib/single_conversation.dart index 26d58d8b..c2747817 100644 --- a/example/lib/single_conversation.dart +++ b/example/lib/single_conversation.dart @@ -38,6 +38,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + appBar: ChannelHeader(), body: Column( children: [ Expanded( diff --git a/example/lib/threads.dart b/example/lib/threads.dart index 6f1400fd..7c08f0b0 100644 --- a/example/lib/threads.dart +++ b/example/lib/threads.dart @@ -47,6 +47,7 @@ class ChannelPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( + appBar: ChannelHeader(), body: Column( children: [ Expanded( diff --git a/lib/src/channel_header.dart b/lib/src/channel_header.dart new file mode 100644 index 00000000..d12c94e3 --- /dev/null +++ b/lib/src/channel_header.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; +import 'package:stream_chat/stream_chat.dart'; +import 'package:stream_chat_flutter/src/channel_name.dart'; +import 'package:timeago/timeago.dart' as timeago; + +import './channel_name.dart'; +import 'channel_image.dart'; +import 'stream_channel.dart'; + +class ChannelHeader extends StatelessWidget implements PreferredSizeWidget { + final bool showBackButton; + final VoidCallback onBackPressed; + + ChannelHeader({ + Key key, + this.showBackButton = true, + this.onBackPressed, + }) : preferredSize = Size.fromHeight(kToolbarHeight), + super(key: key); + + @override + Widget build(BuildContext context) { + final channel = StreamChannel.of(context).channel; + return AppBar( + leading: showBackButton ? _buildBackButton(context) : Container(), + actions: [ + Padding( + padding: const EdgeInsets.only(right: 10.0), + child: Stack( + children: [ + Center(child: ChannelImage(channel: channel)), + ], + ), + ), + ], + centerTitle: true, + title: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ChannelName( + channel: channel, + ), + _buildLastActive(context, channel), + ], + ), + ); + } + + Widget _buildLastActive(BuildContext context, Channel channel) { + return StreamBuilder( + stream: channel.lastMessageAtStream, + initialData: channel.lastMessageAt, + builder: (context, snapshot) { + return (snapshot.data != null) + ? Text( + 'Active ${timeago.format(snapshot.data)}', + style: Theme.of(context).textTheme.caption, + ) + : Container(); + }, + ); + } + + Padding _buildBackButton(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 (onBackPressed != null) { + onBackPressed(); + } else { + Navigator.of(context).pop(); + } + }, + fillColor: Colors.black.withOpacity(.1), + padding: EdgeInsets.all(4), + child: Icon( + Icons.arrow_back_ios, + size: 15, + color: Colors.black, + ), + ), + ); + } + + @override + final Size preferredSize; +} diff --git a/lib/src/channel_image.dart b/lib/src/channel_image.dart index 51ae8ff2..d47afe9a 100644 --- a/lib/src/channel_image.dart +++ b/lib/src/channel_image.dart @@ -14,16 +14,21 @@ class ChannelImage extends StatelessWidget { @override Widget build(BuildContext context) { - return CircleAvatar( - radius: radius, - backgroundImage: channel.extraData?.containsKey('image') ?? false - ? CachedNetworkImageProvider(channel.extraData['image']) - : null, - child: channel.extraData?.containsKey('image') ?? false - ? null - : Text(channel.extraData?.containsKey('name') ?? false - ? channel.extraData['name'][0] - : ''), - ); + return StreamBuilder>( + stream: channel.extraDataStream, + initialData: channel.extraData, + builder: (context, snapshot) { + return CircleAvatar( + radius: radius, + backgroundImage: snapshot.data?.containsKey('image') ?? false + ? CachedNetworkImageProvider(snapshot.data['image']) + : null, + child: snapshot.data?.containsKey('image') ?? false + ? null + : Text(snapshot.data?.containsKey('name') ?? false + ? snapshot.data['name'][0] + : ''), + ); + }); } } diff --git a/lib/src/channel_name.dart b/lib/src/channel_name.dart index 3d7d03de..8d7c7d78 100644 --- a/lib/src/channel_name.dart +++ b/lib/src/channel_name.dart @@ -11,11 +11,16 @@ class ChannelName extends StatelessWidget { @override Widget build(BuildContext context) { - return Text( - channel?.extraData != null - ? (channel?.extraData['name'] ?? channel.cid) - : channel.cid, - style: Theme.of(context).textTheme.body2, - ); + return StreamBuilder>( + stream: channel.extraDataStream, + initialData: channel.extraData, + builder: (context, snapshot) { + return Text( + snapshot.data != null + ? (snapshot.data['name'] ?? channel.cid) + : channel.cid, + style: Theme.of(context).textTheme.body2, + ); + }); } } diff --git a/lib/stream_chat_flutter.dart b/lib/stream_chat_flutter.dart index 9c430f94..fe70b9e0 100644 --- a/lib/stream_chat_flutter.dart +++ b/lib/stream_chat_flutter.dart @@ -1,5 +1,6 @@ export 'package:stream_chat/stream_chat.dart'; +export 'src/channel_header.dart'; export 'src/channel_image.dart'; export 'src/channel_list_view.dart'; export 'src/channel_name.dart';