new chat widget

lib/theme/models/scale_theme/scale_chat_theme.dart

@@ -0,0 +1,369 @@
+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!);
+  }
+}