Same Error as issue "White space added into image in flutter web #1029"

[breadfruit-tree]

Describe the bug:

I use the flutter_html: ^3.0.0-alpha.6 to load page,android devices show correct,but on iOS device,after the picture is loaded, there will always be a large blank space below the picture HTML to reproduce the issue:

<p><img src=\"https://exchange-xzy.oss-accelerate.aliyuncs.com/xzy/uploadImg/aafggxzak4iu-8ac62adc-ac04-4e07-a93d-3f4167952470-1684477825819.jpg\" data-filename=\"aafggxzak4iu-8ac62adc-ac04-4e07-a93d-3f4167952470-1684477825819.jpg\" style=\"width: 455px;\"><br></p>

Html widget configuration:

Html(
                        shrinkWrap: true,
                        data: controller.htmlstringss.value,
                        style: {
                          "img": Style(
                              width: Width.auto(),
                              height: Height.auto(),
                              margin: Margins.zero,
                              padding: EdgeInsets.zero),
                        },
                        ///去掉自带的圆形转圈加载指示器，使用网络请求部分加载
                        customRenders: {
                          tagMatcher("img"): CustomRender.widget(
                              widget: (context, buildChildren) {
                                String? imgUrl =
                                context.tree.element?.attributes["src"];
                                return CachedNetworkImage(
                                  imageUrl: imgUrl!,
                                  width: double.infinity,
                                  fit: BoxFit.fitWidth,
                                  progressIndicatorBuilder:
                                      (context, url, downloadProgress) {
                                    return const SizedBox();
                                  },
                                );
                              })
                        },
                      )

Expected behavior:

no extra white space Screenshots:

https://exchange-xzy.oss-cn-hongkong.aliyuncs.com/xzy/uploadImg/lQDPJxd_PwKvsfrNCeTNBJKwnN30LaQNJ4EEZykHFcASAA_1170_2532.jpg Device details and Flutter/Dart/flutter_html versions:

flutter_html: ^3.0.0-alpha.6 [✓] Flutter (Channel stable, 3.0.2, on macOS 13.3.1 22E772610a darwin-arm, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 14.3) [✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.65.2)

Stacktrace/Logcat

Additional info:

[Sub6Resources]

There was an issue with <br> tags fixed in 3.0.0-beta.1 that should have resolved this issue. Can you try on the latest version (3.0.0-beta.2) and confirm that the issue is resolved?

[breadfruit-tree]

As you said, there is indeed a problem with this <br> label, but I upgraded the version "3.0.0-beta.2" and the project cannot run. The temporary solution is to manually filter out the label

[breadfruit-tree]

There was an issue with <br> tags fixed in 3.0.0-beta.1 that should have resolved this issue. Can you try on the latest version (3.0.0-beta.2) and confirm that the issue is resolved?

Thanks for your reply,best wishes

[Sub6Resources]

Hopefully the Migration Guide can help you get your project running on 3.0.0-beta.2

[KuniMombu]

@Sub6Resources Thank you for the update. We tried on the latest version "3.0.0-beta.2", unfortunately it seems that the issue is still unresolved on the the latest version.

Could you please confirm whether the issue is resolved on your side and let me know the result.

Best,

[KuniMombu]

@Sub6Resources

This is a friendly reminder of my inquiry above.

[muziri]

Same Error, I have to chang "flutter_html" package to "flutter_widget_from_html" package, and solved this error, my code:

                              HtmlWidget('your html data',
                                  customWidgetBuilder: (element) {
                                if(element.localName == 'img'){
                                  // CustomImage is my custom image loading widget
                                  return CustomImage(uri: element.attributes['src']??'');
                                }else{
                                  return null;
                                }
                              }),

[M2dL1fe]

||
Still have problems

[phamconganh]

I think this problem is due to rich text. You can try

Container(
  color: Colors.green,
  child: Text.rich(TextSpan(children: [
    WidgetSpan(child: Container(height: 50, width: 40, color: Colors.red)),
    // const TextSpan(text: '\n'),
    // const TextSpan(text: 'a'),
    const TextSpan(text: '\n'),
  ])),
)

[phamconganh]

The hotfix is add children: const [WidgetSpan(child: SizedBox.shrink())], to line 48 in flutter_html/lib/src/builtins/text_builtin.dart to reset line height InlineSpan to default. The PR #1395

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/src/utils.dart';
import 'package:html/dom.dart' as dom;

/// Handles rendering of text nodes and <br> tags.
class TextBuiltIn extends HtmlExtension {
  const TextBuiltIn();

  @override
  bool matches(ExtensionContext context) {
    return supportedTags.contains(context.elementName) ||
        context.node is dom.Text;
  }

  @override
  Set<String> get supportedTags => {
        "br",
      };

  @override
  StyledElement prepare(
      ExtensionContext context, List<StyledElement> children) {
    if (context.elementName == "br") {
      return LinebreakContentElement(
        style: Style(whiteSpace: WhiteSpace.pre),
        node: context.node,
      );
    }

    if (context.node is dom.Text) {
      return TextContentElement(
        text: context.node.text,
        style: Style(),
        element: context.node.parent,
        node: context.node,
      );
    }

    return EmptyContentElement(node: context.node);
  }

  @override
  InlineSpan build(ExtensionContext context) {
    if (context.styledElement is LinebreakContentElement) {
      return TextSpan(
        text: '\n',
        style: context.styledElement!.style.generateTextStyle(),
        children: const [WidgetSpan(child: SizedBox.shrink())],
      );
    }

    final element = context.styledElement! as TextContentElement;
    return TextSpan(
      style: element.style.generateTextStyle(),
      text: element.text!.transformed(element.style.textTransform),
    );
  }
}