Merge pull request #613 from GetStream/cds-310

feat(ui): added backgroundColor property to the various header, footer widgets

packages/stream_chat_flutter/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 - [#516](https://github.com/GetStream/stream-chat-flutter/issues/516): Added `StreamChatThemeData.placeholderUserImage` for 
   building a widget when the `UserAvatar` image is loading
+- Added a `backgroundColor` property to the following widgets:
+  - `ChannelHeader`
+  - `ChannelListHeader`
+  - `GalleryHeader`
+  - `GalleryFooter`
+  - `ThreadHeader`
 
 
 🔄 Changed

packages/stream_chat_flutter/lib/src/channel_header.dart

@@ -67,6 +67,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
     this.subtitle,
     this.leading,
     this.actions,
+    this.backgroundColor,
   })  : preferredSize = const Size.fromHeight(kToolbarHeight),
         super(key: key);
 
@@ -102,6 +103,9 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   /// By default it shows the [ChannelAvatar]
   final List<Widget>? actions;
 
+  /// The background color for this [ChannelHeader].
+  final Color? backgroundColor;
+
   @override
   Widget build(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
@@ -141,7 +145,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
             brightness: Theme.of(context).brightness,
             elevation: 1,
             leading: leadingWidget,
-            backgroundColor: channelHeaderTheme.color,
+            backgroundColor: backgroundColor ?? channelHeaderTheme.color,
             actions: actions ??
                 <Widget>[
                   Padding(

packages/stream_chat_flutter/lib/src/channel_list_header.dart

@@ -61,6 +61,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
     this.subtitle,
     this.leading,
     this.actions,
+    this.backgroundColor,
   }) : super(key: key);
 
   /// Pass this if you don't have a [StreamChatClient] in your widget tree.
@@ -93,6 +94,9 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
   /// By default it shows the new chat button
   final List<Widget>? actions;
 
+  /// The background color for this [ChannelListHeader].
+  final Color? backgroundColor;
+
   @override
   Widget build(BuildContext context) {
     final _client = client ?? StreamChat.of(context).client;
@@ -124,7 +128,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
             textTheme: Theme.of(context).textTheme,
             brightness: Theme.of(context).brightness,
             elevation: 1,
-            backgroundColor: channelListHeaderThemeData.color,
+            backgroundColor:
+                backgroundColor ?? channelListHeaderThemeData.color,
             centerTitle: true,
             leading: leading ??
                 Center(

packages/stream_chat_flutter/lib/src/gallery_footer.dart

@@ -27,6 +27,7 @@ class GalleryFooter extends StatefulWidget implements PreferredSizeWidget {
     this.totalPages = 0,
     this.mediaAttachments = const [],
     this.mediaSelectedCallBack,
+    this.backgroundColor,
   })  : preferredSize = const Size.fromHeight(kToolbarHeight),
         super(key: key);
 
@@ -55,6 +56,9 @@ class GalleryFooter extends StatefulWidget implements PreferredSizeWidget {
   /// Callback when media is selected
   final ValueChanged<int>? mediaSelectedCallBack;
 
+  /// The background color of this [GalleryFooter].
+  final Color? backgroundColor;
+
   @override
   _GalleryFooterState createState() => _GalleryFooterState();
 
@@ -90,7 +94,8 @@ class _GalleryFooterState extends State<GalleryFooter> {
         context: context,
         removeTop: true,
         child: BottomAppBar(
-          color: galleryFooterThemeData.backgroundColor,
+          color:
+              widget.backgroundColor ?? galleryFooterThemeData.backgroundColor,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [

packages/stream_chat_flutter/lib/src/gallery_header.dart

@@ -19,6 +19,7 @@ class GalleryHeader extends StatelessWidget implements PreferredSizeWidget {
     this.onImageTap,
     this.userName = '',
     this.sentAt = '',
+    this.backgroundColor,
   })  : preferredSize = const Size.fromHeight(kToolbarHeight),
         super(key: key);
 
@@ -50,6 +51,9 @@ class GalleryHeader extends StatelessWidget implements PreferredSizeWidget {
   /// Stores the current index of media shown
   final int currentIndex;
 
+  /// The background color of this [GalleryHeader].
+  final Color? backgroundColor;
+
   @override
   Widget build(BuildContext context) {
     final galleryHeaderThemeData = GalleryHeaderTheme.of(context);
@@ -66,7 +70,8 @@ class GalleryHeader extends StatelessWidget implements PreferredSizeWidget {
               onPressed: onBackPressed,
             )
           : const SizedBox(),
-      backgroundColor: galleryHeaderThemeData.backgroundColor,
+      backgroundColor:
+          backgroundColor ?? galleryHeaderThemeData.backgroundColor,
       actions: <Widget>[
         if (!message.isEphemeral)
           IconButton(

packages/stream_chat_flutter/lib/src/thread_header.dart

@@ -70,6 +70,7 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
     this.actions,
     this.onTitleTap,
     this.showTypingIndicator = true,
+    this.backgroundColor,
   })  : preferredSize = const Size.fromHeight(kToolbarHeight),
         super(key: key);
 
@@ -102,6 +103,9 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
   /// if a user is typing in this thread
   final bool showTypingIndicator;
 
+  /// The background color of this [ThreadHeader].
+  final Color? backgroundColor;
+
   @override
   Widget build(BuildContext context) {
     final channelHeaderTheme = ChannelHeaderTheme.of(context);
@@ -136,7 +140,7 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
                   showUnreads: true,
                 )
               : const SizedBox()),
-      backgroundColor: channelHeaderTheme.color,
+      backgroundColor: backgroundColor ?? channelHeaderTheme.color,
       centerTitle: true,
       actions: actions,
       title: InkWell(