您最多选择25个主题 主题必须以中文或者字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

487 行
21 KiB

using System.Collections.Generic;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using TextStyle =Unity.UIWidgets.painting.TextStyle;
namespace UIWidgetsSample
{
public class ChatThemeUtils
{
public static List<Color> COLORS = new List<Color>
{
new Color(0xffff6767),
new Color(0xff66e0da),
new Color(0xfff5a2d9),
new Color(0xfff0c722),
new Color(0xff6a85e5),
new Color(0xfffd9a6f),
new Color(0xff92db6e),
new Color(0xff73b8e5),
new Color(0xfffd7590),
new Color(0xffc78ae5)
};
/// Dark
public static Color DARK = new Color(0xff1f1c38);
/// Error
public static Color ERROR = new Color(0xffff6767);
/// N0
public static Color NEUTRAL_0 = new Color(0xff1d1c21);
/// N2
public static Color NEUTRAL_2 = new Color(0xff9e9cab);
/// N7
public static Color NEUTRAL_7 = new Color(0xffffffff);
/// N7 with opacity
public static Color NEUTRAL_7_WITH_OPACITY = new Color(0x80ffffff);
/// Primary
public static Color PRIMARY = new Color(0xff6f61e8);
/// Secondary
public static Color SECONDARY = new Color(0xfff5f5f7);
/// Secondary dark
public static Color SECONDARY_DARK = new Color(0xff2b2250);
public static float ratio = 0.5f;
}
/// Base chat theme containing all required variables to make a theme.
/// Extend this class if you want to create a custom theme.
public abstract class ChatTheme
{
/// Icon for select attachment button
public readonly Widget attachmentButtonIcon;
/// Used as a background color of a chat widget
public readonly Color backgroundColor;
/// Text style of the date dividers
public readonly Unity.UIWidgets.painting.TextStyle dateDividerTextStyle;
/// Icon for message's `delivered` status. For the best look use size of 16.
public readonly Widget deliveredIcon;
/// Icon inside file message
public readonly Widget documentIcon;
/// Text style of the empty chat placeholder
public readonly TextStyle emptyChatPlaceholderTextStyle;
/// Color to indicate something bad happened (usually - shades of red)
public readonly Color errorColor;
/// Icon for message's `error` status. For the best look use size of 16.
public readonly Widget errorIcon;
/// Color of the bottom bar where text field is
public readonly Color inputBackgroundColor;
/// Top border radius of the bottom bar where text field is
public readonly BorderRadius inputBorderRadius;
/// Color of the text field's text and attachment/send buttons
public readonly Color inputTextColor;
/// Text style of the message input. To change the color use [inputTextColor].
public readonly TextStyle inputTextStyle;
/// Border radius of message container
public readonly float messageBorderRadius;
/// Primary color of the chat used as a background of sent messages
/// and statuses
public readonly Color primaryColor;
/// Body text style used for displaying text on different types
/// of received messages
public readonly TextStyle receivedMessageBodyTextStyle;
/// Caption text style used for displaying secondary info (e.g. file size)
/// on different types of received messages
public readonly TextStyle receivedMessageCaptionTextStyle;
/// Color of the document icon on received messages. Has no effect when
/// [documentIcon] is used.
public readonly Color receivedMessageDocumentIconColor;
/// Text style used for displaying link description on received messages
public readonly TextStyle receivedMessageLinkDescriptionTextStyle;
/// Text style used for displaying link title on received messages
public readonly TextStyle receivedMessageLinkTitleTextStyle;
/// Secondary color, used as a background of received messages
public readonly Color secondaryColor;
/// Icon for message's `seen` status. For the best look use size of 16.
public readonly Widget seenIcon;
/// Icon for send button
public readonly Widget sendButtonIcon;
/// Body text style used for displaying text on different types
/// of sent messages
public readonly TextStyle sentMessageBodyTextStyle;
/// Caption text style used for displaying secondary info (e.g. file size)
/// on different types of sent messages
public readonly TextStyle sentMessageCaptionTextStyle;
/// Color of the document icon on sent messages. Has no effect when
/// [documentIcon] is used.
public readonly Color sentMessageDocumentIconColor;
/// Text style used for displaying link description on sent messages
public readonly TextStyle sentMessageLinkDescriptionTextStyle;
/// Text style used for displaying link title on sent messages
public readonly TextStyle sentMessageLinkTitleTextStyle;
/// Colors used as backgrounds for user avatars and corresponded user names.
/// Calculated based on a user ID, so unique across the whole app.
public readonly List<Color> userAvatarNameColors;
/// Text style used for displaying initials on user avatar if no
/// image is provided
public readonly TextStyle userAvatarTextStyle;
/// User names text style. Color will be overwritten with [userAvatarNameColors].
public readonly TextStyle userNameTextStyle;
/// Creates a new chat theme based on provided colors and text styles.
public ChatTheme(
Widget attachmentButtonIcon,
Color backgroundColor,
TextStyle dateDividerTextStyle,
Widget deliveredIcon,
Widget documentIcon,
TextStyle emptyChatPlaceholderTextStyle,
Color errorColor,
Widget errorIcon,
Color inputBackgroundColor,
BorderRadius inputBorderRadius,
TextStyle inputTextStyle,
Color inputTextColor,
float messageBorderRadius,
Color primaryColor,
TextStyle receivedMessageBodyTextStyle,
TextStyle receivedMessageCaptionTextStyle,
Color receivedMessageDocumentIconColor,
TextStyle receivedMessageLinkDescriptionTextStyle,
TextStyle receivedMessageLinkTitleTextStyle,
Color secondaryColor,
Widget seenIcon,
Widget sendButtonIcon,
TextStyle sentMessageBodyTextStyle,
TextStyle sentMessageCaptionTextStyle,
Color sentMessageDocumentIconColor,
TextStyle sentMessageLinkDescriptionTextStyle,
TextStyle sentMessageLinkTitleTextStyle,
List<Color> userAvatarNameColors,
TextStyle userAvatarTextStyle,
TextStyle userNameTextStyle
)
{
this.attachmentButtonIcon = attachmentButtonIcon;
this.backgroundColor = backgroundColor;
this.dateDividerTextStyle = dateDividerTextStyle;
this.deliveredIcon = deliveredIcon;
this.documentIcon = documentIcon;
this.emptyChatPlaceholderTextStyle = emptyChatPlaceholderTextStyle;
this.errorColor = errorColor;
this.errorIcon = errorIcon;
this.inputBackgroundColor = inputBackgroundColor;
this.inputBorderRadius = inputBorderRadius;
this.inputTextStyle = inputTextStyle;
this.inputTextColor = inputTextColor;
this.messageBorderRadius = messageBorderRadius;
this.primaryColor = primaryColor;
this.receivedMessageBodyTextStyle = receivedMessageBodyTextStyle;
this.receivedMessageCaptionTextStyle = receivedMessageCaptionTextStyle;
this.receivedMessageDocumentIconColor = receivedMessageDocumentIconColor;
this.receivedMessageLinkDescriptionTextStyle = receivedMessageLinkDescriptionTextStyle;
this.receivedMessageLinkTitleTextStyle = receivedMessageLinkTitleTextStyle;
this.secondaryColor = secondaryColor;
this.seenIcon = seenIcon;
this.sendButtonIcon = sendButtonIcon;
this.sentMessageBodyTextStyle = sentMessageBodyTextStyle;
this.sentMessageCaptionTextStyle = sentMessageCaptionTextStyle;
this.sentMessageDocumentIconColor = sentMessageDocumentIconColor;
this.sentMessageLinkDescriptionTextStyle = sentMessageLinkDescriptionTextStyle;
this.sentMessageLinkTitleTextStyle = sentMessageLinkTitleTextStyle;
this.userAvatarNameColors = userAvatarNameColors;
this.userAvatarTextStyle = userAvatarTextStyle;
this.userNameTextStyle = userNameTextStyle;
}
}
/// Default chat theme which extends [ChatTheme]
internal class DefaultChatTheme : ChatTheme
{
/// Creates a default chat theme. Use this constructor if you want to
/// override only a couple of variables, otherwise create a new class
/// which extends [ChatTheme]
public DefaultChatTheme(
Widget attachmentButtonIcon =null,
Widget deliveredIcon = null,
Widget documentIcon = null,
Widget seenIcon = null,
Widget sendButtonIcon = null,
Widget errorIcon = null,
TextStyle dateDividerTextStyle = null,
TextStyle emptyChatPlaceholderTextStyle = null,
Color inputBackgroundColor = null,
BorderRadius inputBorderRadius = null,
Color inputTextColor = null,
TextStyle inputTextStyle = null,
float messageBorderRadius = 0.0f,
Color primaryColor = null,
TextStyle receivedMessageBodyTextStyle = null,
TextStyle receivedMessageCaptionTextStyle = null,
Color receivedMessageDocumentIconColor = null,
TextStyle receivedMessageLinkDescriptionTextStyle = null,
TextStyle receivedMessageLinkTitleTextStyle = null,
Color secondaryColor = null,
TextStyle sentMessageBodyTextStyle = null,
TextStyle sentMessageCaptionTextStyle = null,
Color sentMessageDocumentIconColor = null,
TextStyle sentMessageLinkDescriptionTextStyle = null,
TextStyle sentMessageLinkTitleTextStyle = null,
List<Color> userAvatarNameColors = null,
TextStyle userAvatarTextStyle = null,
TextStyle userNameTextStyle = null,
Color backgroundColor = null,
Color errorColor = null
) : base(
attachmentButtonIcon,
backgroundColor ?? ChatThemeUtils.NEUTRAL_7,
dateDividerTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_2, fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 12,
fontWeight: FontWeight.w800, height: 1.333f)
: dateDividerTextStyle,
deliveredIcon,
documentIcon,
emptyChatPlaceholderTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_2, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 16, fontWeight: FontWeight.w500, height: 1.5f)
: emptyChatPlaceholderTextStyle,
errorColor ?? ChatThemeUtils.ERROR,
errorIcon,
inputBackgroundColor ?? ChatThemeUtils.NEUTRAL_0,
inputBorderRadius == null ? BorderRadius.vertical(Radius.circular(20f)) : inputBorderRadius,
inputTextColor: inputTextColor ?? ChatThemeUtils.NEUTRAL_7,
inputTextStyle: inputTextStyle == null
? new TextStyle(fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w500, height: 1.5f)
: inputTextStyle,
messageBorderRadius: messageBorderRadius == 0.0 ? 20.0f : messageBorderRadius,
primaryColor: primaryColor ?? ChatThemeUtils.PRIMARY,
receivedMessageBodyTextStyle: receivedMessageBodyTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_0, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w500, height: 1.5f)
: receivedMessageBodyTextStyle,
receivedMessageCaptionTextStyle: receivedMessageCaptionTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_2, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w500, height: 1.333f)
: receivedMessageCaptionTextStyle,
receivedMessageDocumentIconColor: receivedMessageDocumentIconColor ?? ChatThemeUtils.PRIMARY,
receivedMessageLinkDescriptionTextStyle:
receivedMessageLinkDescriptionTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_0,
fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 14, fontWeight: FontWeight.w400, height: 1.428f)
: receivedMessageLinkDescriptionTextStyle,
receivedMessageLinkTitleTextStyle: receivedMessageLinkTitleTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_0, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w800, height: 1.375f)
: receivedMessageLinkTitleTextStyle,
secondaryColor: secondaryColor ?? ChatThemeUtils.SECONDARY,
seenIcon: seenIcon,
sendButtonIcon: sendButtonIcon,
sentMessageBodyTextStyle: sentMessageBodyTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_7, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w500, height: 1.5f)
: sentMessageBodyTextStyle,
sentMessageCaptionTextStyle: sentMessageCaptionTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_7_WITH_OPACITY,
fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w500, height: 1.333f)
: sentMessageCaptionTextStyle,
sentMessageDocumentIconColor: sentMessageDocumentIconColor ?? ChatThemeUtils.NEUTRAL_7,
sentMessageLinkDescriptionTextStyle:
sentMessageLinkDescriptionTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_7, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w400, height: 1.428f)
: sentMessageLinkDescriptionTextStyle,
sentMessageLinkTitleTextStyle: sentMessageLinkTitleTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_7, fontFamily: "Avenir",
fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w800, height: 1.375f)
: sentMessageLinkTitleTextStyle,
userAvatarNameColors: userAvatarNameColors ?? ChatThemeUtils.COLORS,
userAvatarTextStyle: userAvatarTextStyle == null
? new TextStyle(color:ChatThemeUtils.NEUTRAL_7, fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 30,
fontWeight: FontWeight.w800, height: 1.333f)
: userAvatarTextStyle,
userNameTextStyle: userNameTextStyle == null
? new TextStyle(fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 30, fontWeight: FontWeight.w800, height: 1.333f)
: userNameTextStyle
)
{
}
}
/*
/// Dark chat theme which extends [ChatTheme]
@immutable
class DarkChatTheme extends ChatTheme {
/// Creates a dark chat theme. Use this constructor if you want to
/// override only a couple of variables, otherwise create a new class
/// which extends [ChatTheme]
const DarkChatTheme({
Widget? attachmentButtonIcon,
Color backgroundColor = DARK,
TextStyle dateDividerTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: FontWeight.w800,
height: 1.333,
),
Widget? deliveredIcon,
Widget? documentIcon,
TextStyle emptyChatPlaceholderTextStyle = const TextStyle(
color: NEUTRAL_2,
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
Color errorColor = ERROR,
Widget? errorIcon,
Color inputBackgroundColor = SECONDARY_DARK,
BorderRadius inputBorderRadius = const BorderRadius.vertical(
top: Radius.circular(20),
),
Color inputTextColor = NEUTRAL_7,
TextStyle inputTextStyle = const TextStyle(
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
double messageBorderRadius = 20.0,
Color primaryColor = PRIMARY,
TextStyle receivedMessageBodyTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
TextStyle receivedMessageCaptionTextStyle = const TextStyle(
color: NEUTRAL_7_WITH_OPACITY,
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: FontWeight.w500,
height: 1.333,
),
Color receivedMessageDocumentIconColor = PRIMARY,
TextStyle receivedMessageLinkDescriptionTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.428,
),
TextStyle receivedMessageLinkTitleTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w800,
height: 1.375,
),
Color secondaryColor = SECONDARY_DARK,
Widget? seenIcon,
Widget? sendButtonIcon,
TextStyle sentMessageBodyTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
TextStyle sentMessageCaptionTextStyle = const TextStyle(
color: NEUTRAL_7_WITH_OPACITY,
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: FontWeight.w500,
height: 1.333,
),
Color sentMessageDocumentIconColor = NEUTRAL_7,
TextStyle sentMessageLinkDescriptionTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.428,
),
TextStyle sentMessageLinkTitleTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: FontWeight.w800,
height: 1.375,
),
List<Color> userAvatarNameColors = COLORS,
TextStyle userAvatarTextStyle = const TextStyle(
color: NEUTRAL_7,
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: FontWeight.w800,
height: 1.333,
),
TextStyle userNameTextStyle = const TextStyle(
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: FontWeight.w800,
height: 1.333,
),
}) : super(
attachmentButtonIcon: attachmentButtonIcon,
backgroundColor: backgroundColor,
dateDividerTextStyle: dateDividerTextStyle,
deliveredIcon: deliveredIcon,
documentIcon: documentIcon,
emptyChatPlaceholderTextStyle: emptyChatPlaceholderTextStyle,
errorColor: errorColor,
errorIcon: errorIcon,
inputBackgroundColor: inputBackgroundColor,
inputBorderRadius: inputBorderRadius,
inputTextColor: inputTextColor,
inputTextStyle: inputTextStyle,
messageBorderRadius: messageBorderRadius,
primaryColor: primaryColor,
receivedMessageBodyTextStyle: receivedMessageBodyTextStyle,
receivedMessageCaptionTextStyle: receivedMessageCaptionTextStyle,
receivedMessageDocumentIconColor: receivedMessageDocumentIconColor,
receivedMessageLinkDescriptionTextStyle:
receivedMessageLinkDescriptionTextStyle,
receivedMessageLinkTitleTextStyle: receivedMessageLinkTitleTextStyle,
secondaryColor: secondaryColor,
seenIcon: seenIcon,
sendButtonIcon: sendButtonIcon,
sentMessageBodyTextStyle: sentMessageBodyTextStyle,
sentMessageCaptionTextStyle: sentMessageCaptionTextStyle,
sentMessageDocumentIconColor: sentMessageDocumentIconColor,
sentMessageLinkDescriptionTextStyle:
sentMessageLinkDescriptionTextStyle,
sentMessageLinkTitleTextStyle: sentMessageLinkTitleTextStyle,
userAvatarNameColors: userAvatarNameColors,
userAvatarTextStyle: userAvatarTextStyle,
userNameTextStyle: userNameTextStyle,
);
}*/
}