Skip to content

Commit

Permalink
add streamThreadListTile theme
Browse files Browse the repository at this point in the history
  • Loading branch information
xsahil03x committed Jan 6, 2025
1 parent 3718376 commit 706ea93
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 27 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/misc/timestamp.dart';
import 'package:stream_chat_flutter/src/theme/thread_list_tile_theme.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

/// {@template streamThreadListTile}
Expand Down Expand Up @@ -35,6 +36,8 @@ class StreamThreadListTile extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = StreamThreadListTileTheme.of(context);

final language = currentUser?.language;
final unreadMessageCount = thread.read
?.firstWhereOrNull((read) => read.user.id == currentUser?.id)
Expand All @@ -43,11 +46,8 @@ class StreamThreadListTile extends StatelessWidget {
return InkWell(
onTap: onTap,
onLongPress: onLongPress,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 14,
horizontal: 8,
),
child: Container(
padding: theme.padding,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down Expand Up @@ -97,22 +97,23 @@ class ThreadTitle extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = StreamChatTheme.of(context);
final theme = StreamThreadListTileTheme.of(context);

return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.message_outlined,
size: 16,
color: theme.colorTheme.textHighEmphasis,
color: theme.threadChannelNameStyle?.color,
),
const SizedBox(width: 4),
Flexible(
child: Text(
channelName ?? context.translations.noTitleText,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodyBold,
style: theme.threadChannelNameStyle,
),
),
],
Expand Down Expand Up @@ -145,25 +146,21 @@ class ThreadReplyToContent extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = StreamChatTheme.of(context);
final theme = StreamThreadListTileTheme.of(context);

return Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
prefix,
style: theme.textTheme.footnote.copyWith(
color: theme.colorTheme.textLowEmphasis,
),
style: theme.threadReplyToMessageStyle,
),
const SizedBox(width: 4),
Flexible(
child: StreamMessagePreviewText(
language: language,
message: parentMessage,
textStyle: theme.textTheme.footnote.copyWith(
color: theme.colorTheme.textLowEmphasis,
),
textStyle: theme.threadReplyToMessageStyle,
),
),
],
Expand All @@ -186,12 +183,12 @@ class ThreadUnreadCount extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = StreamChatTheme.of(context);
final theme = StreamThreadListTileTheme.of(context);

return Badge(
textColor: Colors.white,
textStyle: theme.textTheme.footnoteBold,
backgroundColor: theme.channelPreviewTheme.unreadCounterColor,
textStyle: theme.threadUnreadMessageCountStyle,
textColor: theme.threadUnreadMessageCountStyle?.color,
backgroundColor: theme.threadUnreadMessageCountBackgroundColor,
label: Text('$unreadCount'),
);
}
Expand All @@ -216,7 +213,7 @@ class ThreadLatestReply extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = StreamChatTheme.of(context);
final theme = StreamThreadListTileTheme.of(context);

return Row(
children: <Widget>[
Expand All @@ -228,24 +225,20 @@ class ThreadLatestReply extends StatelessWidget {
children: [
Text(
latestReply.user!.name,
style: theme.textTheme.bodyBold,
style: theme.threadLatestReplyUsernameStyle,
),
Row(
children: [
Expanded(
child: StreamMessagePreviewText(
language: language,
message: latestReply,
textStyle: theme.textTheme.body.copyWith(
color: theme.colorTheme.textLowEmphasis,
),
textStyle: theme.threadLatestReplyMessageStyle,
),
),
StreamTimestamp(
date: latestReply.createdAt.toLocal(),
style: theme.textTheme.body.copyWith(
color: theme.colorTheme.textLowEmphasis,
),
style: theme.threadLatestReplyTimestampStyle,
),
],
),
Expand Down
34 changes: 34 additions & 0 deletions packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:stream_chat_flutter/src/theme/poll_interactor_theme.dart';
import 'package:stream_chat_flutter/src/theme/poll_option_votes_dialog_theme.dart';
import 'package:stream_chat_flutter/src/theme/poll_options_dialog_theme.dart';
import 'package:stream_chat_flutter/src/theme/poll_results_dialog_theme.dart';
import 'package:stream_chat_flutter/src/theme/thread_list_tile_theme.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

/// {@template streamChatTheme}
Expand Down Expand Up @@ -67,6 +68,7 @@ class StreamChatThemeData {
StreamPollResultsDialogThemeData? pollResultsDialogTheme,
StreamPollCommentsDialogThemeData? pollCommentsDialogTheme,
StreamPollOptionVotesDialogThemeData? pollOptionVotesDialogTheme,
StreamThreadListTileThemeData? threadListTileTheme,
}) {
brightness ??= colorTheme?.brightness ?? Brightness.light;
final isDark = brightness == Brightness.dark;
Expand Down Expand Up @@ -100,6 +102,7 @@ class StreamChatThemeData {
pollResultsDialogTheme: pollResultsDialogTheme,
pollCommentsDialogTheme: pollCommentsDialogTheme,
pollOptionVotesDialogTheme: pollOptionVotesDialogTheme,
threadListTileTheme: threadListTileTheme,
);

return defaultData.merge(customizedData);
Expand Down Expand Up @@ -134,6 +137,7 @@ class StreamChatThemeData {
required this.pollOptionsDialogTheme,
required this.pollCommentsDialogTheme,
required this.pollOptionVotesDialogTheme,
required this.threadListTileTheme,
});

/// Creates a theme from a Material [Theme]
Expand Down Expand Up @@ -479,6 +483,30 @@ class StreamChatThemeData {
pollOptionVoteItemBackgroundColor: colorTheme.inputBg,
pollOptionVoteItemBorderRadius: BorderRadius.circular(12),
),
threadListTileTheme: StreamThreadListTileThemeData(
backgroundColor: colorTheme.barsBg,
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 8),
threadUnreadMessageCountStyle: textTheme.footnoteBold.copyWith(
color: Colors.white,
),
threadUnreadMessageCountBackgroundColor:
channelPreviewTheme.unreadCounterColor,
threadChannelNameStyle: textTheme.bodyBold.copyWith(
color: colorTheme.textHighEmphasis,
),
threadReplyToMessageStyle: textTheme.footnote.copyWith(
color: colorTheme.textLowEmphasis,
),
threadLatestReplyTimestampStyle: textTheme.footnote.copyWith(
color: colorTheme.textLowEmphasis,
),
threadLatestReplyUsernameStyle: textTheme.bodyBold.copyWith(
color: colorTheme.textHighEmphasis,
),
threadLatestReplyMessageStyle: textTheme.body.copyWith(
color: colorTheme.textLowEmphasis,
),
),
);
}

Expand Down Expand Up @@ -541,6 +569,9 @@ class StreamChatThemeData {
/// Theme configuration for the [StreamPollOptionVotesDialog] widget.
final StreamPollOptionVotesDialogThemeData pollOptionVotesDialogTheme;

/// Theme configuration for the [StreamThreadListTile] widget.
final StreamThreadListTileThemeData threadListTileTheme;

/// Creates a copy of [StreamChatThemeData] with specified attributes
/// overridden.
StreamChatThemeData copyWith({
Expand All @@ -567,6 +598,7 @@ class StreamChatThemeData {
StreamPollOptionsDialogThemeData? pollOptionsDialogTheme,
StreamPollCommentsDialogThemeData? pollCommentsDialogTheme,
StreamPollOptionVotesDialogThemeData? pollOptionVotesDialogTheme,
StreamThreadListTileThemeData? threadListTileTheme,
}) =>
StreamChatThemeData.raw(
channelListHeaderTheme:
Expand Down Expand Up @@ -594,6 +626,7 @@ class StreamChatThemeData {
pollCommentsDialogTheme ?? this.pollCommentsDialogTheme,
pollOptionVotesDialogTheme:
pollOptionVotesDialogTheme ?? this.pollOptionVotesDialogTheme,
threadListTileTheme: threadListTileTheme ?? this.threadListTileTheme,
);

/// Merge themes
Expand Down Expand Up @@ -625,6 +658,7 @@ class StreamChatThemeData {
pollCommentsDialogTheme.merge(other.pollCommentsDialogTheme),
pollOptionVotesDialogTheme:
pollOptionVotesDialogTheme.merge(other.pollOptionVotesDialogTheme),
threadListTileTheme: threadListTileTheme.merge(other.threadListTileTheme),
);
}
}
Loading

0 comments on commit 706ea93

Please sign in to comment.