WidgetSpans in RTL text laying out LTR if they occur on the same line

[mimbrown]

Steps to Reproduce

Run the following app:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Test',
      home: TestWidgetSpans(),
    );
  }
}

class TestWidgetSpans extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: Center(
          child: Text.rich(
            TextSpan(
              text: 'هذا اختبار',
              style: TextStyle(
                backgroundColor: Colors.grey.withOpacity(0.5),
                fontSize: 30,
              ),
              children: [
                WidgetSpan(
                  child: Container(
                    width: 30.0,
                    color: Colors.blue.withOpacity(0.5),
                    child: Center(
                      child: Text('1'),
                    ),
                  ),
                ),
                TextSpan(text: ' و '),
                WidgetSpan(
                  child: Container(
                    width: 50.0,
                    color: Colors.red.withOpacity(0.5),
                    child: Center(
                      child: Text('2'),
                    ),
                  ),
                ),
                TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: Container(
                    width: 70.0,
                    color: Colors.green.withOpacity(0.5),
                    child: Center(
                      child: Text('3'),
                    ),
                  ),
                ),
                TextSpan(text: ' ، لكنه معطل'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Expected results:
The 1, 2, and 3 widgets laid out RTL.

Actual results:

Logs

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.720], locale en-US)
    • Flutter version 1.12.13+hotfix.9 at C:\src\flutter
    • Framework revision f139b11009 (10 days ago), 2020-03-30 13:57:30 -0700
    • Engine revision af51afceb8
    • Dart version 2.7.2


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Users\mimbr\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = C:\Users\mimbr\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 44.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.44.0)
    • VS Code at C:\Users\mimbr\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.9.1

[√] Connected device (1 available)
    • sdk gphone x86 • emulator-5554 • android-x86 • Android R (API 29) (emulator)

• No issues found!

[iapicca]

Hi @mimbrown
from the docs lines 98 - 108
I have the impression that the text textDirection still needs to be set like in this sample.

Does this solve the issue?
thank you

[mimbrown]

Hi @iapicca, thanks for your response. I tried what you suggested and it did not resolve the problem. Text.rich just builds the RichText internally, and from what I see in the source (lines 5103-5117, line 5164 here), RichText defaults to the ambient directionality if none is passed, which in this case would be RTL. I think it may be an issue with how placeholder slots are filled after the the paragraph is layed out?

[TahaTesser]

For some reason uneven layout

flutter doctor -v

[✓] Flutter (Channel dev, v1.18.0-dev.5.0, on Mac OS X 10.15.4 19E287, locale
    en-GB)
    • Flutter version 1.18.0-dev.5.0 at /Users/taha/Code/flutter_dev
    • Framework revision 7f56b53de4 (2 days ago), 2020-04-12 12:00:01 -0400
    • Engine revision beb8a7ec48
    • Dart version 2.8.0 (build 2.8.0-dev.20.0 89b0f67261)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.44.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1
[✓] Connected device (4 available)
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • macOS      • macOS            • darwin-x64     • Mac OS X 10.15.4 19E287
    • Chrome     • chrome           • web-javascript • Google Chrome
      81.0.4044.92
    • Web Server • web-server       • web-javascript • Flutter Tools
• No issues found!

[AhmedNourJamalElDin]

Have you found any solution to this, @mimbrown ?
I'm also facing this issue

[mimbrown]

Hi @AhmedNourJamalElDin, I ended up splitting my text on spaces and wrapping each individual word in its own Text widget, then laying out the paragraphs with a Wrap widget. It solved all the layout issues I was facing, but it kills the ability to effectively put LTR text inside RTL and is slower, probably because it's creating so many widgets.