diff --git a/packages/stream_chat_flutter/lib/src/channel_list_view.dart b/packages/stream_chat_flutter/lib/src/channel_list_view.dart index 83f196df..c6a04500 100644 --- a/packages/stream_chat_flutter/lib/src/channel_list_view.dart +++ b/packages/stream_chat_flutter/lib/src/channel_list_view.dart @@ -573,7 +573,7 @@ class _ChannelListViewState extends State { ], child: DecoratedBox( decoration: BoxDecoration( - color: chatThemeData.colorTheme.appBg, + color: chatThemeData.channelListViewTheme.backgroundColor, ), child: widget.channelPreviewBuilder?.call(context, channel) ?? ChannelPreview( diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart index ee941222..41787832 100644 --- a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart +++ b/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 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(); + 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)); + } +}