urlAttachmentBackgroundColor applies to whole message instead of just url attachment part

[OutdatedGuy]

Which packages are you using?

stream_chat_flutter

On what platforms did you experience the issue?

iOS, Android

What version are you using?

stream_chat_flutter - 6.1.0

What happened?

When urlAttachmentBackgroundColor is set it changes the whole color of the message widget instead of just the url attachment part in the message.

Instead it should just change the color of the url attachment part's background color with a margin on all sides, so it will feel like the part/inside of the whole message. (like in WhatsApp)

simulator-screen-recording-iphone-14-pro-max-2023-05-15-at-034827_rOHUfgMC.mp4

Steps to reproduce

1. Create new flutter app
2. Copy below sample code in lib/main.dart
3. Add `stream_chat_flutter` dependency
4. Run code and paste the below sample message in the input field
5. Send 2 messages, one with preview and one without preview.
6. See one with preview has fully different color from normal message

Supporting info to reproduce

Code Sample

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

Future<void> main() async {
  final client = StreamChatClient(
    's2dxdhpxd94g',
    logLevel: Level.INFO,
  );

  await client.connectUser(
    User(id: 'super-band-9'),
    '''eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A''',
  );

  final channel = client.channel('messaging', id: 'godevs');

  channel.watch();

  runApp(
    MyApp(
      client: client,
      channel: channel,
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
    required this.client,
    required this.channel,
  });

  final StreamChatClient client;

  final Channel channel;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        return StreamChat(
          client: client,
          streamChatThemeData: StreamChatThemeData(
            ownMessageTheme: StreamMessageThemeData(
              messageBackgroundColor: Colors.greenAccent,
              reactionsBorderColor: Theme.of(context).colorScheme.primary,
              urlAttachmentBackgroundColor: Colors.blue,
              urlAttachmentTitleMaxLine: 2,
            ),
          ),
          child: widget,
        );
      },
      home: StreamChannel(
        channel: channel,
        child: const ChannelPage(),
      ),
    );
  }
}

class ChannelPage extends StatelessWidget {
  const ChannelPage({
    super.key,
  });

  @override
  // ignore: prefer_expression_function_bodies
  Widget build(BuildContext context) {
    return const Scaffold(
      appBar: StreamChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: StreamMessageListView(),
          ),
          StreamMessageInput(),
        ],
      ),
    );
  }
}

Sample Message

Hello guys,
This is a normal message with a link at the end.

You can see the color of the message widget with with link and without link.

https://YouTube.com

Relevant log output

No response

Flutter analyze output

Analyzing 5amClub-Client-App...                                         
No issues found! (ran in 4.2s)

Flutter doctor output

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E772610a darwin-arm64, locale en-IN)
    • Flutter version 3.10.0 on channel stable at /Users/omphatak/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (5 days ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/omphatak/Library/Android/sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • 967F1AF5-16F6-459D-8ACC-CEBD837E54B9 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 13.3.1 22E772610a
      darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome
      113.0.5672.92

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Code of Conduct

• I agree to follow this project's Code of Conduct

[xsahil03x]

@OutdatedGuy can you also share how it's done on whatsapp or maybe a simple mockup how you want it to be like?

[OutdatedGuy]

@xsahil03x, something like the image attached below.

It gives the feel that the url attachment is inside the whole message as part of that message with the small blue color (main message color) we can see around the the green url attachment background color.

And the url attachment will be build inside that green part, i.e. only the background of url attachment widget will be turned to green.

[xsahil03x]

Makes sense, I will soon provide a builder for UrlAttachments which you can then use to customize it.

[OutdatedGuy]

Hi @xsahil03x, please close this issue if fixed