Merge pull request #1559 from GetStream/feat/urlAttachmentTextMaxLine

packages/stream_chat_flutter/CHANGELOG.md

@@ -15,6 +15,11 @@
 - [[#1544]](https://github.com/GetStream/stream-chat-flutter/issues/1544) Fixed error thrown when unable to fetch
   image/data in Message link preview.
 
+✅ Added
+
+- Added support for `StreamMessageThemeData.urlAttachmentTextMaxLine` to specify the `.maxLines` for the url attachment
+  text. [#1543](https://github.com/GetStream/stream-chat-flutter/issues/1543)
+
 ## 6.1.0
 
 🐞 Fixed

packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart

@@ -91,7 +91,7 @@ class StreamUrlAttachment extends StatelessWidget {
                       ),
                       Positioned(
                         left: 0,
-                        bottom: -1,
+                        bottom: 0,
                         child: DecoratedBox(
                           decoration: BoxDecoration(
                             borderRadius: const BorderRadius.only(
@@ -103,7 +103,8 @@ class StreamUrlAttachment extends StatelessWidget {
                             padding: const EdgeInsets.only(
                               top: 8,
                               left: 8,
-                              right: 8,
+                              right: 12,
+                              bottom: 4,
                             ),
                             child: Text(
                               hostDisplayName,
@@ -119,20 +120,40 @@ class StreamUrlAttachment extends StatelessWidget {
                 padding: textPadding,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
+                  children: <Widget>[
                     if (urlAttachment.title != null)
-                      Text(
+                      Builder(builder: (context) {
-                        urlAttachment.title!.trim(),
+                        final maxLines = messageTheme.urlAttachmentTitleMaxLine;
-                        maxLines: messageTheme.urlAttachmentTitleMaxLine ?? 1,
+
-                        overflow: TextOverflow.ellipsis,
+                        TextOverflow? overflow;
-                        style: messageTheme.urlAttachmentTitleStyle,
+                        if (maxLines != null && maxLines > 0) {
-                      ),
+                          overflow = TextOverflow.ellipsis;
+                        }
+
+                        return Text(
+                          urlAttachment.title!.trim(),
+                          maxLines: maxLines,
+                          overflow: overflow,
+                          style: messageTheme.urlAttachmentTitleStyle,
+                        );
+                      }),
                     if (urlAttachment.text != null)
-                      Text(
+                      Builder(builder: (context) {
-                        urlAttachment.text!,
+                        final maxLines = messageTheme.urlAttachmentTextMaxLine;
-                        style: messageTheme.urlAttachmentTextStyle,
+
-                      ),
+                        TextOverflow? overflow;
-                  ],
+                        if (maxLines != null && maxLines > 0) {
+                          overflow = TextOverflow.ellipsis;
+                        }
+
+                        return Text(
+                          urlAttachment.text!,
+                          maxLines: maxLines,
+                          overflow: overflow,
+                          style: messageTheme.urlAttachmentTextStyle,
+                        );
+                      }),
+                  ].insertBetween(const SizedBox(height: 4)),
                 ),
               ),
             ],

packages/stream_chat_flutter/lib/src/theme/color_theme.dart

@@ -66,7 +66,7 @@ class StreamColorTheme {
     this.appBg = const Color(0xff070A0D),
     this.barsBg = const Color(0xff101418),
     this.linkBg = const Color(0xff00193D),
-    this.accentPrimary = const Color(0xff005FFF),
+    this.accentPrimary = const Color(0xff337eff),
     this.accentError = const Color(0xffFF3742),
     this.accentInfo = const Color(0xff20E070),
     this.borderTop = const Effect(

packages/stream_chat_flutter/lib/src/theme/message_theme.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/theme/avatar_theme.dart';
@@ -27,6 +29,7 @@ class StreamMessageThemeData with Diagnosticable {
     this.urlAttachmentTitleStyle,
     this.urlAttachmentTextStyle,
     this.urlAttachmentTitleMaxLine,
+    this.urlAttachmentTextMaxLine,
   }) : urlAttachmentBackgroundColor =
             urlAttachmentBackgroundColor ?? linkBackgroundColor;
 
@@ -82,6 +85,9 @@ class StreamMessageThemeData with Diagnosticable {
   /// Max number of lines in Url link title.
   final int? urlAttachmentTitleMaxLine;
 
+  /// Max number of lines in Url link text.
+  final int? urlAttachmentTextMaxLine;
+
   /// Copy with a theme
   StreamMessageThemeData copyWith({
     TextStyle? messageTextStyle,
@@ -102,6 +108,7 @@ class StreamMessageThemeData with Diagnosticable {
     TextStyle? urlAttachmentTitleStyle,
     TextStyle? urlAttachmentTextStyle,
     int? urlAttachmentTitleMaxLine,
+    int? urlAttachmentTextMaxLine,
   }) {
     return StreamMessageThemeData(
       messageTextStyle: messageTextStyle ?? this.messageTextStyle,
@@ -128,6 +135,8 @@ class StreamMessageThemeData with Diagnosticable {
           urlAttachmentTextStyle ?? this.urlAttachmentTextStyle,
       urlAttachmentTitleMaxLine:
           urlAttachmentTitleMaxLine ?? this.urlAttachmentTitleMaxLine,
+      urlAttachmentTextMaxLine:
+          urlAttachmentTextMaxLine ?? this.urlAttachmentTextMaxLine,
     );
   }
 
@@ -178,6 +187,16 @@ class StreamMessageThemeData with Diagnosticable {
         b.urlAttachmentTitleStyle,
         t,
       ),
+      urlAttachmentTitleMaxLine: lerpDouble(
+        a.urlAttachmentTitleMaxLine,
+        b.urlAttachmentTitleMaxLine,
+        t,
+      )?.round(),
+      urlAttachmentTextMaxLine: lerpDouble(
+        a.urlAttachmentTextMaxLine,
+        b.urlAttachmentTextMaxLine,
+        t,
+      )?.round(),
     );
   }
 
@@ -206,6 +225,7 @@ class StreamMessageThemeData with Diagnosticable {
       urlAttachmentTitleStyle: other.urlAttachmentTitleStyle,
       urlAttachmentTextStyle: other.urlAttachmentTextStyle,
       urlAttachmentTitleMaxLine: other.urlAttachmentTitleMaxLine,
+      urlAttachmentTextMaxLine: other.urlAttachmentTextMaxLine,
     );
   }
 
@@ -229,7 +249,8 @@ class StreamMessageThemeData with Diagnosticable {
           urlAttachmentHostStyle == other.urlAttachmentHostStyle &&
           urlAttachmentTitleStyle == other.urlAttachmentTitleStyle &&
           urlAttachmentTextStyle == other.urlAttachmentTextStyle &&
-          urlAttachmentTitleMaxLine == other.urlAttachmentTitleMaxLine;
+          urlAttachmentTitleMaxLine == other.urlAttachmentTitleMaxLine &&
+          urlAttachmentTextMaxLine == other.urlAttachmentTextMaxLine;
 
   @override
   int get hashCode =>
@@ -248,7 +269,8 @@ class StreamMessageThemeData with Diagnosticable {
       urlAttachmentHostStyle.hashCode ^
       urlAttachmentTitleStyle.hashCode ^
       urlAttachmentTextStyle.hashCode ^
-      urlAttachmentTitleMaxLine.hashCode;
+      urlAttachmentTitleMaxLine.hashCode ^
+      urlAttachmentTextMaxLine.hashCode;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -284,6 +306,10 @@ class StreamMessageThemeData with Diagnosticable {
       ..add(DiagnosticsProperty(
         'urlAttachmentTitleMaxLine',
         urlAttachmentTitleMaxLine,
+      ))
+      ..add(DiagnosticsProperty(
+        'urlAttachmentTextMaxLine',
+        urlAttachmentTextMaxLine,
       ));
   }
 }

packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart

@@ -195,15 +195,12 @@ class StreamChatThemeData {
             width: 32,
           ),
         ),
-        messageLinksStyle: TextStyle(
+        messageLinksStyle: TextStyle(color: accentColor),
-          color: accentColor,
-        ),
         urlAttachmentBackgroundColor: colorTheme.linkBg,
         urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor),
-        urlAttachmentTitleStyle:
+        urlAttachmentTitleStyle: textTheme.footnoteBold,
-            textTheme.body.copyWith(fontWeight: FontWeight.w700),
+        urlAttachmentTextStyle: textTheme.footnote,
-        urlAttachmentTextStyle:
+        urlAttachmentTitleMaxLine: 1,
-            textTheme.body.copyWith(fontWeight: FontWeight.w400),
       ),
       otherMessageTheme: StreamMessageThemeData(
         reactionsBackgroundColor: colorTheme.borders,
@@ -215,9 +212,7 @@ class StreamChatThemeData {
         messageAuthorStyle:
             textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
         repliesStyle: textTheme.footnoteBold.copyWith(color: accentColor),
-        messageLinksStyle: TextStyle(
+        messageLinksStyle: TextStyle(color: accentColor),
-          color: accentColor,
-        ),
         messageBackgroundColor: colorTheme.barsBg,
         messageBorderColor: colorTheme.borders,
         avatarTheme: StreamAvatarThemeData(
@@ -229,10 +224,9 @@ class StreamChatThemeData {
         ),
         urlAttachmentBackgroundColor: colorTheme.linkBg,
         urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor),
-        urlAttachmentTitleStyle:
+        urlAttachmentTitleStyle: textTheme.footnoteBold,
-            textTheme.body.copyWith(fontWeight: FontWeight.w700),
+        urlAttachmentTextStyle: textTheme.footnote,
-        urlAttachmentTextStyle:
+        urlAttachmentTitleMaxLine: 1,
-            textTheme.body.copyWith(fontWeight: FontWeight.w400),
       ),
       messageInputTheme: StreamMessageInputThemeData(
         borderRadius: BorderRadius.circular(20),

packages/stream_chat_flutter/test/src/theme/message_input_theme_test.dart

@@ -69,11 +69,11 @@ final _messageInputThemeControlMidLerp = StreamMessageInputThemeData(
   borderRadius: BorderRadius.circular(20),
   sendAnimationDuration: const Duration(milliseconds: 300),
   inputBackgroundColor: const Color(0xff87898b),
-  actionButtonColor: const Color(0xff005fff),
+  actionButtonColor: const Color(0xff196eff),
   actionButtonIdleColor: const Color(0xff7a7a7a),
-  sendButtonColor: const Color(0xff005fff),
+  sendButtonColor: const Color(0xff196eff),
   sendButtonIdleColor: const Color(0xff848585),
-  expandButtonColor: const Color(0xff005fff),
+  expandButtonColor: const Color(0xff196eff),
   inputTextStyle: const TextStyle(
     color: Color(0xff7f7f7f),
     fontSize: 14,