Adding a fill color to messageInputTheme causes the TextField in StreamMessageInput to have no border on the corners

[Jonny1987]

Which packages are you using?

stream_chat_flutter

On what platforms did you experience the issue?

Android

What version are you using?

8.2.0

What happened?

Adding a fill color to messageInputTheme causes the TextField in StreamMessageInput to have no border on the corners

Steps to reproduce

1. Use StreamMessageInput in your app
2. Set add the following to StreamChatThemeData:

  messageInputTheme: StreamChatThemeData().messageInputTheme.copyWith(
      inputDecoration: InputDecoration(
          fillColor: fillColor,
          filled: true,
      ),
  );

Supporting info to reproduce

No response

Relevant log output

No response

Flutter analyze output

No issues found! (ran in 16.8s)

Flutter doctor output

[✓] Flutter (Channel stable, 3.24.1, on Ubuntu 22.04.5 LTS 6.8.0-48-generic, locale en_US.UTF-8)
    • Flutter version 3.24.1 on channel stable at /home/john/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5874a72aa4 (3 months ago), 2024-08-20 16:46:00 -0500
    • Engine revision c9b9d5780d
    • Dart version 3.5.1
    • DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/john/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /opt/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11609105)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1.1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2024.1)
    • Android Studio at /opt/android-studio
    • 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.10+0-17.0.10b1087.21-11609105)

[✓] VS Code (version 1.94.2)
    • VS Code at /usr/share/code
    • Flutter extension version 3.100.0

[✓] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Linux (desktop)              • linux         • linux-x64      • Ubuntu 22.04.5 LTS 6.8.0-48-generic
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 130.0.6723.69

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

• No issues found!

Code of Conduct

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

[Jonny1987]

This is caused by missing borderRadius in the transparent borders in _getInputDecoration in stream_message_input.dart and I fixed temporarily by adding these borders with border radius in messageInputTheme:

  messageInputTheme: StreamChatThemeData().messageInputTheme.copyWith(
        inputDecoration: InputDecoration(
          fillColor: lightFillColor,
          filled: true,
          border: OutlineInputBorder(
            borderRadius: StreamChatThemeData().messageInputTheme.borderRadius!,
            borderSide: const BorderSide(
              color: Colors.transparent,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: StreamChatThemeData().messageInputTheme.borderRadius!,
            borderSide: const BorderSide(
              color: Colors.transparent,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: StreamChatThemeData().messageInputTheme.borderRadius!,
            borderSide: const BorderSide(
              color: Colors.transparent,
            ),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: StreamChatThemeData().messageInputTheme.borderRadius!,
            borderSide: const BorderSide(
              color: Colors.transparent,
            ),
          ),
          disabledBorder: OutlineInputBorder(
            borderRadius: StreamChatThemeData().messageInputTheme.borderRadius!,
            borderSide: const BorderSide(
              color: Colors.transparent,
            ),
          ),
        ),
      ),