chore: allow ChannelListView background color to be themed via StreamChatThemeData

This commit adds the ChannelListViewTheme and ChannelListViewThemeData classes, and updates ChannelListView to set its background color accordingly

packages/stream_chat_flutter/lib/src/channel_list_view.dart

@@ -573,7 +573,7 @@ class _ChannelListViewState extends State<ChannelListView> {
             ],
         child: DecoratedBox(
           decoration: BoxDecoration(
-            color: chatThemeData.colorTheme.appBg,
+            color: chatThemeData.channelListViewTheme.backgroundColor,
           ),
           child: widget.channelPreviewBuilder?.call(context, channel) ??
               ChannelPreview(

packages/stream_chat_flutter/lib/src/stream_chat_theme.dart

@@ -61,6 +61,7 @@ class StreamChatThemeData {
     GalleryHeaderThemeData? imageHeaderTheme,
     GalleryFooterThemeData? imageFooterTheme,
     MessageListViewThemeData? messageListViewTheme,
+    ChannelListViewThemeData? channelListViewTheme,
   }) {
     brightness ??= colorTheme?.brightness ?? Brightness.light;
     final isDark = brightness == Brightness.dark;
@@ -85,6 +86,7 @@ class StreamChatThemeData {
       galleryHeaderTheme: imageHeaderTheme,
       galleryFooterTheme: imageFooterTheme,
       messageListViewTheme: messageListViewTheme,
+      channelListViewTheme: channelListViewTheme,
     );
 
     return defaultData.merge(customizedData);
@@ -114,6 +116,7 @@ class StreamChatThemeData {
     required this.galleryHeaderTheme,
     required this.galleryFooterTheme,
     required this.messageListViewTheme,
+    required this.channelListViewTheme,
   });
 
   /// Create a theme from a Material [Theme]
@@ -169,9 +172,12 @@ class StreamChatThemeData {
   /// Assets used for rendering reactions
   final List<ReactionIcon> reactionIcons;
 
-  ///
+  /// Theme configuration for the [MessageListView] widget.
   final MessageListViewThemeData messageListViewTheme;
 
+  /// Theme configuration for the [ChannelListView] widget.
+  final ChannelListViewThemeData channelListViewTheme;
+
   /// Creates a copy of [StreamChatThemeData] with specified attributes
   /// overridden.
   StreamChatThemeData copyWith({
@@ -189,6 +195,7 @@ class StreamChatThemeData {
     GalleryHeaderThemeData? galleryHeaderTheme,
     GalleryFooterThemeData? galleryFooterTheme,
     MessageListViewThemeData? messageListViewTheme,
+    ChannelListViewThemeData? channelListViewTheme,
   }) =>
       StreamChatThemeData.raw(
         channelListHeaderTheme:
@@ -207,6 +214,7 @@ class StreamChatThemeData {
         galleryHeaderTheme: galleryHeaderTheme ?? this.galleryHeaderTheme,
         galleryFooterTheme: galleryFooterTheme ?? this.galleryFooterTheme,
         messageListViewTheme: messageListViewTheme ?? this.messageListViewTheme,
+        channelListViewTheme: channelListViewTheme ?? this.channelListViewTheme,
       );
 
   /// Merge themes
@@ -229,6 +237,8 @@ class StreamChatThemeData {
       galleryFooterTheme: galleryFooterTheme.merge(other.galleryFooterTheme),
       messageListViewTheme:
           messageListViewTheme.merge(other.messageListViewTheme),
+      channelListViewTheme:
+          channelListViewTheme.merge(other.channelListViewTheme),
     );
   }
 
@@ -451,6 +461,9 @@ class StreamChatThemeData {
       messageListViewTheme: MessageListViewThemeData(
         backgroundColor: colorTheme.barsBg,
       ),
+      channelListViewTheme: ChannelListViewThemeData(
+        backgroundColor: colorTheme.appBg,
+      ),
     );
   }
 }
@@ -1748,7 +1761,7 @@ class MessageListViewTheme extends InheritedTheme {
   /// Typical usage is as follows:
   ///
   /// ```dart
-  /// MessageListViewTheme theme = ImageFooterTheme.of(context);
+  /// MessageListViewTheme theme = MessageListViewTheme.of(context);
   /// ```
   static MessageListViewThemeData of(BuildContext context) {
     final messageListViewTheme =
@@ -1802,7 +1815,8 @@ class MessageListViewThemeData with Diagnosticable {
     double t,
   ) =>
       MessageListViewThemeData(
-          backgroundColor: Color.lerp(a.backgroundColor, b.backgroundColor, t));
+        backgroundColor: Color.lerp(a.backgroundColor, b.backgroundColor, t),
+      );
 
   /// Merges one [MessageListViewThemeData] with another.
   MessageListViewThemeData merge(MessageListViewThemeData? other) {
@@ -1828,3 +1842,111 @@ class MessageListViewThemeData with Diagnosticable {
     properties.add(ColorProperty('backgroundColor', backgroundColor));
   }
 }
+
+/// Overrides the default style of [ChannelListView] descendants.
+///
+/// See also:
+///
+///  * [ChannelListViewThemeData], which is used to configure this theme.
+class ChannelListViewTheme extends InheritedTheme {
+  /// Creates a [ChannelListViewTheme].
+  ///
+  /// The [data] parameter must not be null.
+  const ChannelListViewTheme({
+    Key? key,
+    required this.data,
+    required Widget child,
+  }) : super(key: key, child: child);
+
+  /// The configuration of this theme.
+  final ChannelListViewThemeData data;
+
+  /// The closest instance of this class that encloses the given context.
+  ///
+  /// If there is no enclosing [ChannelListViewTheme] widget, then
+  /// [StreamChatThemeData.channelListViewTheme] is used.
+  ///
+  /// Typical usage is as follows:
+  ///
+  /// ```dart
+  /// ChannelListViewTheme theme = ChannelListViewTheme.of(context);
+  /// ```
+  static ChannelListViewThemeData of(BuildContext context) {
+    final channelListViewTheme =
+        context.dependOnInheritedWidgetOfExactType<ChannelListViewTheme>();
+    return channelListViewTheme?.data ??
+        StreamChatTheme.of(context).channelListViewTheme;
+  }
+
+  @override
+  Widget wrap(BuildContext context, Widget child) =>
+      ChannelListViewTheme(data: data, child: child);
+
+  @override
+  bool updateShouldNotify(ChannelListViewTheme oldWidget) =>
+      data != oldWidget.data;
+}
+
+/// A style that overrides the default appearance of [ChannelListView]s when
+/// used with [ChannelListViewTheme] or with the overall [StreamChatTheme]'s
+/// [StreamChatThemeData.channelListViewTheme].
+///
+/// See also:
+///
+/// * [ChannelListViewTheme], the theme which is configured with this class.
+/// * [StreamChatThemeData.channelListViewTheme], which can be used to override
+/// the default style for [ChannelListView]s below the overall
+/// [StreamChatTheme].
+class ChannelListViewThemeData with Diagnosticable {
+  /// Creates a [ChannelListViewThemeData].
+  ChannelListViewThemeData({
+    this.backgroundColor,
+  });
+
+  /// The color of the [ChannelListView] background.
+  final Color? backgroundColor;
+
+  /// Copies this [ChannelListViewThemeData] to another.
+  ChannelListViewThemeData copyWith({
+    Color? backgroundColor,
+  }) =>
+      ChannelListViewThemeData(
+        backgroundColor: backgroundColor ?? this.backgroundColor,
+      );
+
+  /// Linearly interpolate between two [ChannelListViewThemeData] themes.
+  ///
+  /// All the properties must be non-null.
+  ChannelListViewThemeData lerp(
+    ChannelListViewThemeData a,
+    ChannelListViewThemeData b,
+    double t,
+  ) =>
+      ChannelListViewThemeData(
+        backgroundColor: Color.lerp(a.backgroundColor, b.backgroundColor, t),
+      );
+
+  /// Merges one [ChannelListViewThemeData] with another.
+  ChannelListViewThemeData merge(ChannelListViewThemeData? other) {
+    if (other == null) return this;
+    return copyWith(
+      backgroundColor: other.backgroundColor,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is ChannelListViewThemeData &&
+          runtimeType == other.runtimeType &&
+          backgroundColor == other.backgroundColor;
+
+  @override
+  int get hashCode => backgroundColor.hashCode;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(ColorProperty('backgroundColor', backgroundColor));
+  }
+}