add header

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: <Widget>[
           Expanded(

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: <Widget>[
           Expanded(

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: <Widget>[
           Expanded(

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: <Widget>[
           Expanded(

example/lib/threads.dart

@@ -47,6 +47,7 @@ class ChannelPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: ChannelHeader(),
       body: Column(
         children: <Widget>[
           Expanded(

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: <Widget>[
+        Padding(
+          padding: const EdgeInsets.only(right: 10.0),
+          child: Stack(
+            children: <Widget>[
+              Center(child: ChannelImage(channel: channel)),
+            ],
+          ),
+        ),
+      ],
+      centerTitle: true,
+      title: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: <Widget>[
+          ChannelName(
+            channel: channel,
+          ),
+          _buildLastActive(context, channel),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildLastActive(BuildContext context, Channel channel) {
+    return StreamBuilder<DateTime>(
+      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;
+}

lib/src/channel_image.dart

@@ -14,16 +14,21 @@ class ChannelImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return CircleAvatar(
+    return StreamBuilder<Map<String, dynamic>>(
-      radius: radius,
+        stream: channel.extraDataStream,
-      backgroundImage: channel.extraData?.containsKey('image') ?? false
+        initialData: channel.extraData,
-          ? CachedNetworkImageProvider(channel.extraData['image'])
+        builder: (context, snapshot) {
-          : null,
+          return CircleAvatar(
-      child: channel.extraData?.containsKey('image') ?? false
+            radius: radius,
-          ? null
+            backgroundImage: snapshot.data?.containsKey('image') ?? false
-          : Text(channel.extraData?.containsKey('name') ?? false
+                ? CachedNetworkImageProvider(snapshot.data['image'])
-              ? channel.extraData['name'][0]
+                : null,
-              : ''),
+            child: snapshot.data?.containsKey('image') ?? false
-    );
+                ? null
+                : Text(snapshot.data?.containsKey('name') ?? false
+                    ? snapshot.data['name'][0]
+                    : ''),
+          );
+        });
   }
 }

lib/src/channel_name.dart

@@ -11,11 +11,16 @@ class ChannelName extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Text(
+    return StreamBuilder<Map<String, dynamic>>(
-      channel?.extraData != null
+        stream: channel.extraDataStream,
-          ? (channel?.extraData['name'] ?? channel.cid)
+        initialData: channel.extraData,
-          : channel.cid,
+        builder: (context, snapshot) {
-      style: Theme.of(context).textTheme.body2,
+          return Text(
-    );
+            snapshot.data != null
+                ? (snapshot.data['name'] ?? channel.cid)
+                : channel.cid,
+            style: Theme.of(context).textTheme.body2,
+          );
+        });
   }
 }

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';