Problem when use the Directionality widget on rtl

[wahidanvary]

Steps to Reproduce

HTML

```

براي ايجاد فاصله خالي در متن، كدام كليد مناسب است؟

 ر1:الف) Backspace                   ب)ر2:Caps Lock                      ر3:ج) Space Bar                     د)ر4:Enter

```

`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.