Merge pull request #37 from GetStream/feature/channelHeaderOnTap

Feature/channel header on tap

lib/src/channel_header.dart

@@ -57,11 +57,19 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   /// By default it calls [Navigator.pop]
   final VoidCallback onBackPressed;
 
+  /// Callback to call when the header is tapped.
+  final VoidCallback onTitleTap;
+
+  /// Callback to call when the image is tapped.
+  final VoidCallback onImageTap;
+
   /// Creates a channel header
   ChannelHeader({
     Key key,
     this.showBackButton = true,
     this.onBackPressed,
+    this.onTitleTap,
+    this.onImageTap,
   })  : preferredSize = Size.fromHeight(kToolbarHeight),
         super(key: key);
 
@@ -76,27 +84,33 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
       actions: <Widget>[
         Padding(
           padding: const EdgeInsets.only(right: 10.0),
-          child: Stack(
+          child: Center(
-            children: <Widget>[
+            child: ChannelImage(
-              Center(
+              onTap: onImageTap,
-                child: ChannelImage(),
+            ),
-              ),
-            ],
           ),
         ),
       ],
       centerTitle: true,
-      title: Column(
+      title: InkWell(
-        crossAxisAlignment: CrossAxisAlignment.center,
+        onTap: onTitleTap,
-        children: <Widget>[
+        child: Container(
-          ChannelName(
+          height: preferredSize.height,
-            textStyle: StreamChatTheme.of(context)
+          width: preferredSize.width,
-                .channelTheme
+          child: Column(
-                .channelHeaderTheme
+            crossAxisAlignment: CrossAxisAlignment.center,
-                .title,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ChannelName(
+                textStyle: StreamChatTheme.of(context)
+                    .channelTheme
+                    .channelHeaderTheme
+                    .title,
+              ),
+              _buildLastActive(context, channel),
+            ],
           ),
-          _buildLastActive(context, channel),
+        ),
-        ],
       ),
     );
   }

lib/src/channel_image.dart

@@ -47,6 +47,7 @@ class ChannelImage extends StatelessWidget {
     Key key,
     this.channel,
     this.constraints,
+    this.onTap,
   }) : super(key: key);
 
   /// The channel to show the image of
@@ -55,6 +56,9 @@ class ChannelImage extends StatelessWidget {
   /// The diameter of the image
   final BoxConstraints constraints;
 
+  /// The function called when the image is tapped
+  final VoidCallback onTap;
+
   @override
   Widget build(BuildContext context) {
     final client = StreamChat.of(context);
@@ -86,25 +90,36 @@ class ChannelImage extends StatelessWidget {
               decoration: BoxDecoration(
                 color: StreamChatTheme.of(context).accentColor,
               ),
-              child: image != null
+              child: Stack(
-                  ? CachedNetworkImage(
+                fit: StackFit.expand,
-                      imageUrl: image,
+                children: <Widget>[
-                      errorWidget: (_, __, ___) {
+                  image != null
-                        return Center(
+                      ? CachedNetworkImage(
-                          child: Text(
+                          imageUrl: image,
-                            snapshot.data?.containsKey('name') ?? false
+                          errorWidget: (_, __, ___) {
-                                ? snapshot.data['name'][0]
+                            return Center(
-                                : '',
+                              child: Text(
-                            style: TextStyle(
+                                snapshot.data?.containsKey('name') ?? false
-                              color: Colors.white,
+                                    ? snapshot.data['name'][0]
-                              fontWeight: FontWeight.bold,
+                                    : '',
-                            ),
+                                style: TextStyle(
-                          ),
+                                  color: Colors.white,
-                        );
+                                  fontWeight: FontWeight.bold,
-                      },
+                                ),
-                      fit: BoxFit.cover,
+                              ),
-                    )
+                            );
-                  : SizedBox(),
+                          },
+                          fit: BoxFit.cover,
+                        )
+                      : SizedBox(),
+                  Material(
+                    color: Colors.transparent,
+                    child: InkWell(
+                      onTap: onTap,
+                    ),
+                  ),
+                ],
+              ),
             ),
           );
         });

lib/src/channel_list_view.dart

@@ -56,6 +56,7 @@ class ChannelListView extends StatefulWidget {
     this.channelWidget,
     this.channelPreviewBuilder,
     this.errorBuilder,
+    this.onImageTap,
   }) : super(key: key);
 
   final Widget Function(Error error) errorBuilder;
@@ -94,6 +95,9 @@ class ChannelListView extends StatefulWidget {
   /// Builder used to create a custom channel preview
   final ChannelPreviewBuilder channelPreviewBuilder;
 
+  /// The function called when the image is tapped
+  final Function(Channel) onImageTap;
+
   @override
   _ChannelListViewState createState() => _ChannelListViewState();
 }
@@ -215,8 +219,6 @@ class _ChannelListViewState extends State<ChannelListView> {
     if (i < channels.length) {
       final channel = channels[i];
 
-      final channelClient = streamChat.client.channels[channel.cid];
-
       ChannelTapCallback onTap;
       if (widget.onChannelTap != null) {
         onTap = widget.onChannelTap;
@@ -237,11 +239,11 @@ class _ChannelListViewState extends State<ChannelListView> {
       }
 
       return StreamChannel(
-        key: ValueKey<String>('CHANNEL-${channelClient.id}'),
+        key: ValueKey<String>('CHANNEL-${channel.id}'),
-        channel: channelClient,
+        channel: channel,
         child: StreamBuilder<DateTime>(
-          initialData: channelClient.updatedAt,
+          initialData: channel.updatedAt,
-          stream: channelClient.updatedAtStream,
+          stream: channel.updatedAtStream,
           builder: (context, snapshot) {
             Widget child;
             if (widget.channelPreviewBuilder != null) {
@@ -249,14 +251,14 @@ class _ChannelListViewState extends State<ChannelListView> {
                 children: [
                   widget.channelPreviewBuilder(
                     context,
-                    channelClient,
+                    channel,
                   ),
                   Positioned.fill(
                     child: Material(
                       color: Colors.transparent,
                       child: InkWell(
                         onTap: () {
-                          onTap(channelClient, widget.channelWidget);
+                          onTap(channel, widget.channelWidget);
                         },
                       ),
                     ),
@@ -265,9 +267,14 @@ class _ChannelListViewState extends State<ChannelListView> {
               );
             } else {
               child = ChannelPreview(
-                channel: channelClient,
+                channel: channel,
-                onTap: (channelClient) {
+                onImageTap: widget.onImageTap != null
-                  onTap(channelClient, widget.channelWidget);
+                    ? () {
+                        widget.onImageTap(channel);
+                      }
+                    : null,
+                onTap: (channel) {
+                  onTap(channel, widget.channelWidget);
                 },
               );
             }

lib/src/channel_preview.dart

@@ -25,10 +25,14 @@ class ChannelPreview extends StatelessWidget {
   /// Channel displayed
   final Channel channel;
 
+  /// The function called when the image is tapped
+  final VoidCallback onImageTap;
+
   ChannelPreview({
     @required this.channel,
     Key key,
     this.onTap,
+    this.onImageTap,
   }) : super(key: key);
 
   @override
@@ -37,7 +41,9 @@ class ChannelPreview extends StatelessWidget {
       onTap: () {
         onTap(channel);
       },
-      leading: ChannelImage(),
+      leading: ChannelImage(
+        onTap: onImageTap,
+      ),
       title: ChannelName(
         textStyle: StreamChatTheme.of(context).channelPreviewTheme.title,
       ),