flutter_widget_from_html icon indicating copy to clipboard operation
flutter_widget_from_html copied to clipboard

Text Underline Color Issue

Open chenjiangmin126 opened this issue 5 months ago • 5 comments

I have encountered a minor issue while using your plugin. I noticed that when I try to change the color of underlined text, the color of the underline does not change accordingly. I expected the underline color to match the color I set for the text, but it appears that the underline remains black regardless.

HTML
  <p><span style="color:rgb(206,147,216)">1231231232342345345345345345345345423523452345234523453245</span>
    <br />
    <br />
    <strong style="color:rgb(213,0,249)"><u>32452345</u></strong>
    <br />
    <br />
    <span style="color:rgb(233,30,99);background-color:rgb(255,183,77)">123123123</span>
    <br />
    <br />
  </p>
`HtmlWidget` configuration

  @override
  Widget build(BuildContext context) {
    return HtmlWidget(
      text,
      enableCaching: false,
      onTapUrl: onTapUrl,
      onTapImage: onTapImage,
      customStylesBuilder: (element) {
        if (element.localName == "a") {
          return {
            "color": "#588AFB",
            "text-decoration": "none",
          };
        }
        return null;
      },
      customWidgetBuilder: (element) {
        if (element.localName == "img") {
          String url = element.attributes["src"] ?? "";
          return ImageNetworkWidget(
            url,
            width: double.infinity,
            onTap: () => RouterUtils.openPhotoViewDialog(images: [url], showOriginal: true),
          );
        }
        return null;
      },
    );
  }

Tesing environment

[✓] Flutter (Channel stable, 3.16.3, on macOS 14.2.1 23C71 darwin-arm64, locale zh-Hans-CN) • Flutter version 3.16.3 on channel stable at /Users/chenjiangmin/fvm/versions/3.16.3 • Upstream repository https://github.com/flutter/flutter.git • Framework revision b0366e0a3f (7 周前), 2023-12-05 19:46:39 -0800 • Engine revision 54a7145303 • Dart version 3.2.3 • DevTools version 2.28.4 • Pub download mirror https://pub.flutter-io.cn • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/chenjiangmin/Library/Android/sdk • Platform android-34, build-tools 33.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.12.1

[✓] Android Studio (version 2021.3) • 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 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.4) • IntelliJ at /Applications/IntelliJ IDEA.app • 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

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

[✓] Connected device (2 available) • 陈江民 (mobile) • 00008101-001221C03452001E • ios • iOS 16.6 20G75 • iPhone 15 Pro Max (mobile) • 6051563E-8CD4-466D-8EF9-8BC07DDD04D9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)

Expected results

image

Actual results

image

chenjiangmin126 avatar Jan 24 '24 06:01 chenjiangmin126

There is another property for change the line.

I dont have the code with me, I'm on mobile actually, but check others property, you'll find it.

It's not a bug

And96 avatar Feb 16 '24 16:02 And96

Have you tried using text-decoration-color?

daohoangson avatar Feb 17 '24 10:02 daohoangson

Have you tried using ?text-decoration-color

When I added the text-decoration-color attribute, it was indeed displayed correctly according to the value of this attribute. However, my understanding is that the underline color of thetag in HTML should inherit the color of the text

chenjiangmin126 avatar Feb 18 '24 01:02 chenjiangmin126

That's true. Let me check whether this can be improved.

daohoangson avatar Feb 18 '24 02:02 daohoangson