Problem when use the Directionality widget on rtl

[wahidanvary]

Steps to Reproduce

HTML

<p> <kh1>ر1:</kh1>الف) Backspace                   ب)<kh2>ر2:</kh2>Caps Lock                      <kh3>ر3:</kh3>ج) Space Bar                     د)<kh4>ر4:</kh4>Enter</p>

`HtmlWidget` configuration

HtmlWidget(qBox1ContentHtmlCopy,
    customWidgetBuilder: (element) {
      bool containHole = true;
      int hole = 0;
      String counter = "";
      while (containHole) {
        hole++;
        counter = hole.toString();
        if (!qBox1ContentHtmlCopy.contains("kh$counter")) {
          containHole = false;
        } else if (element.localName == "kh$counter") {
          return InlineCustomWidget(
            alignment: PlaceholderAlignment.middle,
            child: Container(
                padding: EdgeInsets.zero, // Remove any default padding
                margin: const EdgeInsets.only(top: 0.0, bottom: 0.0), // Adjust margins as needed
                child: qBox1Widgets[hole - 1]),
          );
        }
      }
      return null;
    },
    renderMode: RenderMode.column,
    text style: const TextStyle(fontSize: 14,),
),

Tesing environment

[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.19045.4651], locale en-US)
    • Flutter version 3.22.2 on channel stable at D:\sdkflutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (6 weeks ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at d:/sdk
    • Platform android-34, build-tools 33.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.9.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31205.134
    • Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 2023.1)
    • Android Studio at C:\Program Files\Android\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.7+0-b2043.56-10550314)
[√] VS Code, 64-bit edition (version 1.67.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.40.0
[√] Connected device (4 available)
    • ASUS Z01QD (mobile) • 127.0.0.1:21503 • android-x64    • Android 9 (API 28)
    • Windows (desktop)   • windows         • windows-x64    • Microsoft Windows [Version 10.0.19045.4651]
    • Chrome (web)        • chrome          • web-javascript • Google Chrome 126.0.6478.127
    • Edge (web)          • edge            • web-javascript • Microsoft Edge 126.0.2592.102

Expected results

I expect when using rtl directionality widget custom widget still works correct but the custom widget is set on the wrong place

Actual results

when I use the LTR Directionality widget everything is working and the output is correct:

but when I use the RTL Directionality widget, the custom widget is set on the wrong place like this:

What's wrong?

[daohoangson]

To confirm: it works correctly with LTR but doesn't work with RTL?

[wahidanvary]

To confirm: it works correctly with LTR but doesn't work with RTL?

Yes on RTL the position of custom Widgets does not change correctly on every row.

[daohoangson]

How did you configure the Directionality widget? Wrap it outside HtmlWidget?

[wahidanvary]

How did you configure the Directionality widget? Wrap it outside HtmlWidget?

I checked in two ways: Wrap outside HtmlWidget: Directionality( textDirection: TextDirection.rtl, child: HtmlWidget(... Or use dir="rtl" attribute in the HTML tag. both of them make the same wrong output.

[wahidanvary]

I'm sorry. You upgraded to a new version, but the problem hasn't been solved yet. Would you be able to check that?