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 COLORS = new List { 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 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 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 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 * 16, 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 * 16, fontWeight: FontWeight.w500, height: 1.5f) : receivedMessageBodyTextStyle, receivedMessageCaptionTextStyle: receivedMessageCaptionTextStyle == null ? new TextStyle(color:ChatThemeUtils.NEUTRAL_2, fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 12, 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 * 16, 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 * 16, fontWeight: FontWeight.w500, height: 1.5f) : sentMessageBodyTextStyle, sentMessageCaptionTextStyle: sentMessageCaptionTextStyle == null ? new TextStyle(color:ChatThemeUtils.NEUTRAL_7_WITH_OPACITY, fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 12, 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 * 14, fontWeight: FontWeight.w400, height: 1.428f) : sentMessageLinkDescriptionTextStyle, sentMessageLinkTitleTextStyle: sentMessageLinkTitleTextStyle == null ? new TextStyle(color:ChatThemeUtils.NEUTRAL_7, fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 16, 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 * 12, fontWeight: FontWeight.w800, height: 1.333f) : userAvatarTextStyle, userNameTextStyle: userNameTextStyle == null ? new TextStyle(fontFamily: "Avenir", fontSize:ChatThemeUtils.ratio * 12, 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 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, ); }*/ }