mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-07-22 06:08:54 -04:00
369 lines
14 KiB
Dart
369 lines
14 KiB
Dart
import 'package:awesome_extensions/awesome_extensions.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_chat_core/flutter_chat_core.dart' as core;
|
|
|
|
import 'scale_theme.dart';
|
|
|
|
class ScaleChatTheme {
|
|
ScaleChatTheme({
|
|
// Default chat theme
|
|
required this.chatTheme,
|
|
|
|
// Customization fields (from v1 of flutter chat ui)
|
|
required this.attachmentButtonIcon,
|
|
// required this.attachmentButtonMargin,
|
|
required this.backgroundColor,
|
|
required this.bubbleBorderSide,
|
|
// required this.dateDividerMargin,
|
|
// required this.chatContentMargin,
|
|
required this.dateDividerTextStyle,
|
|
// required this.deliveredIcon,
|
|
// required this.documentIcon,
|
|
// required this.emptyChatPlaceholderTextStyle,
|
|
// required this.errorColor,
|
|
// required this.errorIcon,
|
|
required this.inputBackgroundColor,
|
|
// required this.inputSurfaceTintColor,
|
|
// required this.inputElevation,
|
|
required this.inputBorderRadius,
|
|
// required this.inputMargin,
|
|
required this.inputPadding,
|
|
required this.inputTextColor,
|
|
required this.inputTextStyle,
|
|
required this.messageBorderRadius,
|
|
required this.messageInsetsHorizontal,
|
|
required this.messageInsetsVertical,
|
|
// required this.messageMaxWidth,
|
|
required this.primaryColor,
|
|
required this.receivedEmojiMessageTextStyle,
|
|
required this.receivedMessageBodyTextStyle,
|
|
// required this.receivedMessageCaptionTextStyle,
|
|
// required this.receivedMessageDocumentIconColor,
|
|
// required this.receivedMessageLinkDescriptionTextStyle,
|
|
// required this.receivedMessageLinkTitleTextStyle,
|
|
required this.secondaryColor,
|
|
// required this.seenIcon,
|
|
required this.sendButtonIcon,
|
|
// required this.sendButtonMargin,
|
|
// required this.sendingIcon,
|
|
required this.onlyEmojiFontSize,
|
|
required this.timeStyle,
|
|
required this.sentMessageBodyTextStyle,
|
|
// required this.sentMessageCaptionTextStyle,
|
|
// required this.sentMessageDocumentIconColor,
|
|
// required this.sentMessageLinkDescriptionTextStyle,
|
|
// required this.sentMessageLinkTitleTextStyle,
|
|
// required this.statusIconPadding,
|
|
// required this.userAvatarImageBackgroundColor,
|
|
// required this.userAvatarNameColors,
|
|
// required this.userAvatarTextStyle,
|
|
// required this.userNameTextStyle,
|
|
// required this.bubbleMargin,
|
|
required this.inputContainerDecoration,
|
|
// required this.inputTextCursorColor,
|
|
// required this.receivedMessageBodyBoldTextStyle,
|
|
// required this.receivedMessageBodyCodeTextStyle,
|
|
// required this.receivedMessageBodyLinkTextStyle,
|
|
// required this.sentMessageBodyBoldTextStyle,
|
|
// required this.sentMessageBodyCodeTextStyle,
|
|
// required this.sentMessageBodyLinkTextStyle,
|
|
// required this.highlightMessageColor,
|
|
});
|
|
|
|
final core.ChatTheme chatTheme;
|
|
|
|
/// Icon for select attachment button.
|
|
final Widget? attachmentButtonIcon;
|
|
|
|
/// Margin of attachment button.
|
|
// final EdgeInsets? attachmentButtonMargin;
|
|
|
|
/// Used as a background color of a chat widget.
|
|
final Color backgroundColor;
|
|
|
|
// Margin around the message bubble.
|
|
// final EdgeInsetsGeometry? bubbleMargin;
|
|
|
|
/// Border for chat bubbles
|
|
final BorderSide bubbleBorderSide;
|
|
|
|
/// Margin around date dividers.
|
|
// final EdgeInsets dateDividerMargin;
|
|
|
|
/// Margin inside chat area.
|
|
// final EdgeInsets chatContentMargin;
|
|
|
|
/// Text style of the date dividers.
|
|
final TextStyle dateDividerTextStyle;
|
|
|
|
/// Icon for message's `delivered` status. For the best look use size of 16.
|
|
// final Widget? deliveredIcon;
|
|
|
|
/// Icon inside file message.
|
|
// final Widget? documentIcon;
|
|
|
|
/// Text style of the empty chat placeholder.
|
|
// final TextStyle emptyChatPlaceholderTextStyle;
|
|
|
|
/// Color to indicate something bad happened (usually - shades of red).
|
|
// final Color errorColor;
|
|
|
|
/// Icon for message's `error` status. For the best look use size of 16.
|
|
// final Widget? errorIcon;
|
|
|
|
/// Color of the bottom bar where text field is.
|
|
final Color inputBackgroundColor;
|
|
|
|
/// Surface Tint Color of the bottom bar where text field is.
|
|
// final Color inputSurfaceTintColor;
|
|
|
|
/// Elevation to use for input material
|
|
// final double inputElevation;
|
|
|
|
/// Top border radius of the bottom bar where text field is.
|
|
final BorderRadius inputBorderRadius;
|
|
|
|
/// Decoration of the container wrapping the text field.
|
|
final Decoration? inputContainerDecoration;
|
|
|
|
/// Outer insets of the bottom bar where text field is.
|
|
// final EdgeInsets inputMargin;
|
|
|
|
/// Inner insets of the bottom bar where text field is.
|
|
final EdgeInsets inputPadding;
|
|
|
|
/// Color of the text field's text and attachment/send buttons.
|
|
final Color inputTextColor;
|
|
|
|
/// Color of the text field's cursor.
|
|
// final Color? inputTextCursorColor;
|
|
|
|
/// Text style of the message input. To change the color use [inputTextColor].
|
|
final TextStyle inputTextStyle;
|
|
|
|
/// Border radius of message container.
|
|
final double messageBorderRadius;
|
|
|
|
/// Horizontal message bubble insets.
|
|
final double messageInsetsHorizontal;
|
|
|
|
/// Vertical message bubble insets.
|
|
final double messageInsetsVertical;
|
|
|
|
/// Message bubble max width. set to [double.infinity] adaptive screen.
|
|
// final double messageMaxWidth;
|
|
|
|
/// Primary color of the chat used as a background of sent messages
|
|
/// and statuses.
|
|
final Color primaryColor;
|
|
|
|
/// Text style used for displaying emojis on text messages.
|
|
final TextStyle receivedEmojiMessageTextStyle;
|
|
|
|
/// Body text style used for displaying bold text on received text messages.
|
|
// Default to a bold version of [receivedMessageBodyTextStyle].
|
|
// final TextStyle? receivedMessageBodyBoldTextStyle;
|
|
|
|
/// Body text style used for displaying code text on received text messages.
|
|
// Defaults to a mono version of [receivedMessageBodyTextStyle].
|
|
// final TextStyle? receivedMessageBodyCodeTextStyle;
|
|
|
|
/// Text style used for displaying link text on received text messages.
|
|
// Defaults to [receivedMessageBodyTextStyle].
|
|
// final TextStyle? receivedMessageBodyLinkTextStyle;
|
|
|
|
/// Body text style used for displaying text on different types
|
|
/// of received messages.
|
|
final TextStyle receivedMessageBodyTextStyle;
|
|
|
|
/// Caption text style used for displaying secondary info (e.g. file size) on
|
|
/// different types of received messages.
|
|
// final TextStyle receivedMessageCaptionTextStyle;
|
|
|
|
/// Color of the document icon on received messages. Has no effect when
|
|
// [documentIcon] is used.
|
|
// final Color receivedMessageDocumentIconColor;
|
|
|
|
/// Text style used for displaying link description on received messages.
|
|
// final TextStyle receivedMessageLinkDescriptionTextStyle;
|
|
|
|
/// Text style used for displaying link title on received messages.
|
|
// final TextStyle receivedMessageLinkTitleTextStyle;
|
|
|
|
/// Secondary color, used as a background of received messages.
|
|
final Color secondaryColor;
|
|
|
|
/// Icon for message's `seen` status. For the best look use size of 16.
|
|
// final Widget? seenIcon;
|
|
|
|
/// Icon for send button.
|
|
final Widget? sendButtonIcon;
|
|
|
|
/// Margin of send button.
|
|
// final EdgeInsets? sendButtonMargin;
|
|
|
|
/// Icon for message's `sending` status. For the best look use size of 10.
|
|
// final Widget? sendingIcon;
|
|
|
|
/// Text size for displaying emojis on text messages.
|
|
final double onlyEmojiFontSize;
|
|
|
|
/// Text style used for time and status
|
|
final TextStyle timeStyle;
|
|
|
|
/// Body text style used for displaying bold text on sent text messages.
|
|
/// Defaults to a bold version of [sentMessageBodyTextStyle].
|
|
// final TextStyle? sentMessageBodyBoldTextStyle;
|
|
|
|
/// Body text style used for displaying code text on sent text messages.
|
|
/// Defaults to a mono version of [sentMessageBodyTextStyle].
|
|
// final TextStyle? sentMessageBodyCodeTextStyle;
|
|
|
|
/// Text style used for displaying link text on sent text messages.
|
|
/// Defaults to [sentMessageBodyTextStyle].
|
|
// final TextStyle? sentMessageBodyLinkTextStyle;
|
|
|
|
/// Body text style used for displaying text on different types
|
|
/// of sent messages.
|
|
final TextStyle sentMessageBodyTextStyle;
|
|
|
|
/// Caption text style used for displaying secondary info (e.g. file size) on
|
|
/// different types of sent messages.
|
|
// final TextStyle sentMessageCaptionTextStyle;
|
|
|
|
/// Color of the document icon on sent messages. Has no effect when
|
|
// [documentIcon] is used.
|
|
// final Color sentMessageDocumentIconColor;
|
|
|
|
/// Text style used for displaying link description on sent messages.
|
|
// final TextStyle sentMessageLinkDescriptionTextStyle;
|
|
|
|
/// Text style used for displaying link title on sent messages.
|
|
// final TextStyle sentMessageLinkTitleTextStyle;
|
|
|
|
/// Padding around status icons.
|
|
// final EdgeInsets statusIconPadding;
|
|
|
|
/// Color used as a background for user avatar if an image is provided.
|
|
/// Visible if the image has some transparent parts.
|
|
// final Color userAvatarImageBackgroundColor;
|
|
|
|
/// Colors used as backgrounds for user avatars with no image and so,
|
|
/// corresponding user names.
|
|
/// Calculated based on a user ID, so unique across the whole app.
|
|
// final List<Color> userAvatarNameColors;
|
|
|
|
/// Text style used for displaying initials on user avatar if no
|
|
/// image is provided.
|
|
// final TextStyle userAvatarTextStyle;
|
|
|
|
/// User names text style. Color will be overwritten with
|
|
// [userAvatarNameColors].
|
|
// final TextStyle userNameTextStyle;
|
|
|
|
/// Color used as background of message row on highlight.
|
|
// final Color? highlightMessageColor;
|
|
}
|
|
|
|
extension ScaleChatThemeExt on ScaleTheme {
|
|
ScaleChatTheme chatTheme() {
|
|
// 'brightness' is not actually used by ChatColors.fromThemeData,
|
|
// or ChatTypography.fromThemeData so just say 'light' here
|
|
final themeData = toThemeData(Brightness.light);
|
|
final typography = core.ChatTypography.fromThemeData(themeData);
|
|
|
|
final surfaceContainer = config.preferBorders
|
|
? scheme.secondaryScale.calloutText
|
|
: scheme.secondaryScale.calloutBackground;
|
|
|
|
final colors = core.ChatColors(
|
|
// Primary color, often used for sent messages and accents.
|
|
primary: config.preferBorders
|
|
? scheme.primaryScale.calloutText
|
|
: scheme.primaryScale.calloutBackground,
|
|
// Color for text and icons displayed on top of [primary].
|
|
onPrimary: scheme.primaryScale.primaryText,
|
|
// The main background color of the chat screen.
|
|
surface:
|
|
scheme.grayScale.appBackground.withAlpha(config.wallpaperAlpha),
|
|
|
|
// Color for text and icons displayed on top of [surface].
|
|
onSurface: scheme.primaryScale.appText,
|
|
|
|
// Background color for elements like received messages.
|
|
surfaceContainer: surfaceContainer,
|
|
|
|
// A slightly lighter/darker variant of [surfaceContainer].
|
|
surfaceContainerLow: surfaceContainer.darken(25),
|
|
|
|
// A slightly lighter/darker variant of [surfaceContainer].
|
|
surfaceContainerHigh: surfaceContainer.lighten(25));
|
|
|
|
final chatTheme = core.ChatTheme(
|
|
colors: colors,
|
|
typography: typography,
|
|
shape:
|
|
BorderRadius.all(Radius.circular(config.borderRadiusScale * 12)));
|
|
|
|
return ScaleChatTheme(
|
|
chatTheme: chatTheme,
|
|
primaryColor: config.preferBorders
|
|
? scheme.primaryScale.calloutText
|
|
: scheme.primaryScale.calloutBackground,
|
|
secondaryColor: config.preferBorders
|
|
? scheme.secondaryScale.calloutText
|
|
: scheme.secondaryScale.calloutBackground,
|
|
backgroundColor:
|
|
scheme.grayScale.appBackground.withAlpha(config.wallpaperAlpha),
|
|
messageBorderRadius: config.borderRadiusScale * 12,
|
|
bubbleBorderSide: config.preferBorders
|
|
? BorderSide(
|
|
color: scheme.primaryScale.calloutBackground,
|
|
width: 2,
|
|
)
|
|
: BorderSide(width: 2, color: Colors.black.withAlpha(96)),
|
|
sendButtonIcon: Image.asset(
|
|
'assets/icon-send.png',
|
|
color: config.preferBorders
|
|
? scheme.primaryScale.border
|
|
: scheme.primaryScale.borderText,
|
|
package: 'flutter_chat_ui',
|
|
),
|
|
inputBackgroundColor: Colors.blue,
|
|
inputBorderRadius: BorderRadius.zero,
|
|
inputTextStyle: textTheme.bodyLarge!,
|
|
inputContainerDecoration: BoxDecoration(
|
|
border: config.preferBorders
|
|
? Border(
|
|
top:
|
|
BorderSide(color: scheme.primaryScale.border, width: 2))
|
|
: null,
|
|
color: config.preferBorders
|
|
? scheme.primaryScale.elementBackground
|
|
: scheme.primaryScale.border),
|
|
inputPadding: const EdgeInsets.all(6),
|
|
inputTextColor: !config.preferBorders
|
|
? scheme.primaryScale.appText
|
|
: scheme.primaryScale.border,
|
|
messageInsetsHorizontal: 12,
|
|
messageInsetsVertical: 8,
|
|
attachmentButtonIcon: const Icon(Icons.attach_file),
|
|
sentMessageBodyTextStyle: textTheme.bodyLarge!.copyWith(
|
|
color: config.preferBorders
|
|
? scheme.primaryScale.calloutBackground
|
|
: scheme.primaryScale.calloutText,
|
|
),
|
|
onlyEmojiFontSize: 64,
|
|
timeStyle: textTheme.bodySmall!.copyWith(fontSize: 9),
|
|
receivedMessageBodyTextStyle: textTheme.bodyLarge!.copyWith(
|
|
color: config.preferBorders
|
|
? scheme.secondaryScale.calloutBackground
|
|
: scheme.secondaryScale.calloutText,
|
|
),
|
|
receivedEmojiMessageTextStyle: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 64,
|
|
),
|
|
dateDividerTextStyle: textTheme.labelSmall!);
|
|
}
|
|
}
|