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

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!

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

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 rendered?

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!

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

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.

The issue still stands @iapicca.
Any fix yet?

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.

Hi, @mimbrown. Have you tried any other ways? I cannot use yours because I need to put them inside a ListView. If you put one large item inside list view you will have render problems( because it should be multiple items to create each object on scroll), so this is not an option, and I tried to fork the project too, but I can't seem to find where the problem is. I really need an answer here; any help will do @TahaTesser @iapicca.

If the widgets are all fixed width, you could try something like this (this is extremely hacky and I haven't validated it):

Wrap all the widgets in a stateful widget with a top-level Transform.translate

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  _WidgetSpanWrapperState createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

Use the wrapper when you instantiate your widget spans

TextSpan(
  children: <InlineSpan>[
    TextSpan(text: 'Some text'),
    WidgetSpan(
      child: WidgetSpanWrapper(
        key: // Create a global key that you can keep track of
        child: // Your widget
      ),
    ),
  ],
)

After layout, loop through your list of global keys, which is in the same order as the widget spans in the paragraph. Detect if any are on the same line and swap them as necessary using the translate offset.

I've now validated it. Here's a full code sample:
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

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

double getYOffsetOf(GlobalKey key) {
  RenderBox box = key.currentContext.findRenderObject();
  return box.localToGlobal(Offset.zero).dy;
}

double getXOffsetOf(GlobalKey key) {
  RenderBox box = key.currentContext.findRenderObject();
  return box.localToGlobal(Offset.zero).dx;
}

void resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
  var middle = (keys.length / 2.0).floor();
  for (int i = 0; i < middle; i++) {
    var a = keys[i];
    var b = keys[keys.length - i - 1];
    var left = getXOffsetOf(a);
    var right = getXOffsetOf(b);
    a.currentState.updateXOffset(right - left);
    b.currentState.updateXOffset(left - right);
  }
}

class TestWidgetSpans extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
    var nextKey = () {
      var key = GlobalKey<_WidgetSpanWrapperState>();
      keys.add(key);
      return key;
    };
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      List<GlobalKey<_WidgetSpanWrapperState>> sameRow;
      GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
      keys.forEach((key) {
        if (getYOffsetOf(key) == getYOffsetOf(prev)) {
          if (sameRow == null) {
            sameRow = [prev];
          }
          sameRow.add(key);
        } else if (sameRow != null) {
          resolveSameRow(sameRow);
          sameRow = null;
        }
        prev = key;
      });
      if (sameRow != null) {
        resolveSameRow(sameRow);
      }
    });
    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: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.red, order: 1),
                  ),
                ),
                TextSpan(text: ' و '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.orange, order: 2),
                  ),
                ),
                TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.yellow, order: 3),
                  ),
                ),
                TextSpan(text: ' ، لكنه معطل'),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.green, order: 4),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.blue, order: 5),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.purple, order: 6),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.pink, order: 7),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.lime, order: 8),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.teal, order: 9),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  _WidgetSpanWrapperState createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  void updateXOffset(double xOffset) {
    setState(() {
      this.offset = Offset(xOffset, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

class TestWidgetSpan extends StatelessWidget {
  final Color color;
  final int order;

  const TestWidgetSpan({Key key, this.color, this.order}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.5),
      width: 40,
      child: Center(child: Text(order.toString())),
    );
  }
}

Hi @mimbrown, thank you for your answer.
The answer you have given still has a problem( as you can see in the number 9 that it had covered the string "اخبارات"). One of my issues with using WidgetSpan inside an RTL RichText is the problem that I've mentioned.

Found the solution to WidgetSpans covering strings problem ( not the RTL problem of WidgetSpan ). The only thing you need to do is to add font size to the widget span.
WidgetSpan(
  style: TextStyle(
    fontSize: 0.5,
  ),
  child: SizedBox(
    key: keys[index],
  ),
),

hi i have same problem please help me!

I got same proglem, do you have any working solution?

The issue is still valid on latest stable and master channel.

flutter doctor -v (stable)
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.22.5 at /Users/pedromassango/Code/flutter_stable
    • Framework revision 7891006299 (5 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin installed
    • Dart plugin version 203.6912

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

[✓] Connected device (1 available)
    • iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)

! Doctor found issues in 1 category.

flutter doctor -v
[✓] Flutter (Channel master, 1.26.0-2.0.pre.313, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.26.0-2.0.pre.313 at /Users/pedromassango/Code/flutter_master
    • Framework revision 1cb0a24a46 (5 hours ago), 2021-01-12 21:39:27 -0800
    • Engine revision 10cee6abcb
    • Dart version 2.12.0 (build 2.12.0-214.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.1.5
    • Dart plugin version 203.6912

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

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • Mac OS X 10.15.7 19H2 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 87.0.4280.141

! Doctor found issues in 1 category.

The issue is still valid on latest stable and master channel.

flutter doctor -v (stable)
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.22.5 at /Users/pedromassango/Code/flutter_stable
    • Framework revision 7891006299 (5 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin installed
    • Dart plugin version 203.6912

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

[✓] Connected device (1 available)
    • iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)

! Doctor found issues in 1 category.

flutter doctor -v
[✓] Flutter (Channel master, 1.26.0-2.0.pre.313, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.26.0-2.0.pre.313 at /Users/pedromassango/Code/flutter_master
    • Framework revision 1cb0a24a46 (5 hours ago), 2021-01-12 21:39:27 -0800
    • Engine revision 10cee6abcb
    • Dart version 2.12.0 (build 2.12.0-214.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.1.5
    • Dart plugin version 203.6912

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

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • Mac OS X 10.15.7 19H2 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 87.0.4280.141

! Doctor found issues in 1 category.

same issue

same issue

same here!
any update ?
@mimbrown did u find any solution ?

I've now validated it. Here's a full code sample:
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

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

double getYOffsetOf(GlobalKey key) {
  RenderBox box = key.currentContext.findRenderObject();
  return box.localToGlobal(Offset.zero).dy;
}

double getXOffsetOf(GlobalKey key) {
  RenderBox box = key.currentContext.findRenderObject();
  return box.localToGlobal(Offset.zero).dx;
}

void resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
  var middle = (keys.length / 2.0).floor();
  for (int i = 0; i < middle; i++) {
    var a = keys[i];
    var b = keys[keys.length - i - 1];
    var left = getXOffsetOf(a);
    var right = getXOffsetOf(b);
    a.currentState.updateXOffset(right - left);
    b.currentState.updateXOffset(left - right);
  }
}

class TestWidgetSpans extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
    var nextKey = () {
      var key = GlobalKey<_WidgetSpanWrapperState>();
      keys.add(key);
      return key;
    };
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      List<GlobalKey<_WidgetSpanWrapperState>> sameRow;
      GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
      keys.forEach((key) {
        if (getYOffsetOf(key) == getYOffsetOf(prev)) {
          if (sameRow == null) {
            sameRow = [prev];
          }
          sameRow.add(key);
        } else if (sameRow != null) {
          resolveSameRow(sameRow);
          sameRow = null;
        }
        prev = key;
      });
      if (sameRow != null) {
        resolveSameRow(sameRow);
      }
    });
    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: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.red, order: 1),
                  ),
                ),
                TextSpan(text: ' و '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.orange, order: 2),
                  ),
                ),
                TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.yellow, order: 3),
                  ),
                ),
                TextSpan(text: ' ، لكنه معطل'),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.green, order: 4),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.blue, order: 5),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.purple, order: 6),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.pink, order: 7),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.lime, order: 8),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: TestWidgetSpan(color: Colors.teal, order: 9),
                  ),
                ),
                TextSpan(text: ' اختبارات '),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  _WidgetSpanWrapperState createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  void updateXOffset(double xOffset) {
    setState(() {
      this.offset = Offset(xOffset, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

class TestWidgetSpan extends StatelessWidget {
  final Color color;
  final int order;

  const TestWidgetSpan({Key key, this.color, this.order}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.5),
      width: 40,
      child: Center(child: Text(order.toString())),
    );
  }
}

you have solved one of my big problem, which i have spent 3 months finding how to set the numbers in right order. Thanks man.

same problem any solutions?

same problem any solutions?

you can use the above solution from @mimbrown. This is the exact solution you need. I also tried myself and solve my problem.

Verified this issue using latest versions and observed that the original issue reported persists.

 stable, master flutter doctor -v
[!] Flutter (Channel stable, 3.7.12, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.7.12 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (3 days ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.10.0-15.0.pre.22, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.10.0-15.0.pre.22 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fdd6b87636 (44 minutes ago), 2023-04-27 00:29:23 -0400
    • Engine revision d9f91aadff
    • Dart version 3.1.0 (build 3.1.0-48.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

Can anyone explain me where is the issue and I will try to solve it because our project stoped a cause of this issue.
Thanks.

Any update on this?

The bug sill persists. Any solutions

I have tried the suggested solution but for some reason the same issue persist with me.

The bug sill persists. Any solutions ??

//  I just modified the code above to be Null Safety
// it is working ok
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Widget Test',
home: TestWidgetSpans(),
);
}
}
double getYOffsetOf(GlobalKey key) {
RenderBox? box = key.currentContext!.findRenderObject() as RenderBox;
return box!.globalToLocal(Offset.zero).dy;
// return box!.getTransformTo(box!.parent).localToGlobal(Offset.zero).dy;
}
double getXOffsetOf(GlobalKey key) {
RenderBox? box = key.currentContext!.findRenderObject() as RenderBox;
return box.localToGlobal(Offset.zero).dx;
}
void resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
var middle = (keys.length / 2.0).floor();
for (int i = 0; i < middle; i++) {
var a = keys[i];
var b = keys[keys.length - i - 1];
var left = getXOffsetOf(a);
var right = getXOffsetOf(b);
a.currentState?.updateXOffset(right - left);
b.currentState?.updateXOffset(left - right);
}
}
class TestWidgetSpans extends StatelessWidget {
@override
Widget build(BuildContext context) {
final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
var nextKey = () {
var key = GlobalKey<_WidgetSpanWrapperState>();
keys.add(key);
return key;
};
SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
List<GlobalKey<_WidgetSpanWrapperState>>? sameRow;
GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
keys.forEach((key) {
if (getYOffsetOf(key) == getYOffsetOf(prev)) {
if (sameRow == null) {
sameRow = [prev];
}
sameRow!.add(key);
} else if (sameRow != null) {
resolveSameRow(sameRow!);
sameRow = null;
}
prev = key;
});
if (sameRow != null) {
resolveSameRow(sameRow!);
}
});
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: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.red, order: 1),
),
),
TextSpan(text: ' و '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.orange, order: 2),
),
),
TextSpan(text: ' ثم '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.yellow, order: 3),
),
),
TextSpan(text: ' ، لكنه معطل'),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.green, order: 4),
),
),
TextSpan(text: ' اختبارات '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.blue, order: 5),
),
),
TextSpan(text: ' اختبارات '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.purple, order: 6),
),
),
TextSpan(text: ' اختبارات '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.pink, order: 7),
),
),
TextSpan(text: ' اختبارات '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.lime, order: 8),
),
),
TextSpan(text: ' اختبارات '),
WidgetSpan(
child: WidgetSpanWrapper(
key: nextKey(),
child: TestWidgetSpan(color: Colors.teal, order: 9),
),
),
TextSpan(text: ' اختبارات '),
],
),
),
),
),
);
}
}
class WidgetSpanWrapper extends StatefulWidget {
const WidgetSpanWrapper({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
_WidgetSpanWrapperState createState() => _WidgetSpanWrapperState();
}
class _WidgetSpanWrapperState extends State {
Offset offset = Offset.zero;
void updateXOffset(double xOffset) {
setState(() {
this.offset = Offset(xOffset, 0);
});
}
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: offset,
child: widget.child,
);
}
}
class TestWidgetSpan extends StatelessWidget {
final Color color;
final int order;
const TestWidgetSpan({Key? key, required this.color, required this.order}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: color.withOpacity(0.5),
width: 40,
child: Center(child: Text(order.toString())),
);
}
}

here is flutter 3 version
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

class App extends StatelessWidget {
  const App({super.key});

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

double _getYOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;

  return box.localToGlobal(Offset.zero).dy;
}

double _getXOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;
  return box.localToGlobal(Offset.zero).dx;
}

void _resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
  var middle = (keys.length / 2.0).floor();
  for (int i = 0; i < middle; i++) {
    var a = keys[i];
    var b = keys[keys.length - i - 1];
    var left = _getXOffsetOf(a);
    var right = _getXOffsetOf(b);
    a.currentState!.updateXOffset(right - left);
    b.currentState!.updateXOffset(left - right);
  }
}

class TestWidgetSpans extends StatelessWidget {
  const TestWidgetSpans({super.key});

  @override
  Widget build(BuildContext context) {
    final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
    nextKey() {
      var key = GlobalKey<_WidgetSpanWrapperState>();
      keys.add(key);
      return key;
    }

    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      List<GlobalKey<_WidgetSpanWrapperState>>? sameRow;
      GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
      for (var key in keys) {
        if (_getYOffsetOf(key) == _getYOffsetOf(prev)) {
          sameRow ??= [prev];
          sameRow.add(key);
        } else if (sameRow != null) {
          _resolveSameRow(sameRow);
          sameRow = null;
        }
        prev = key;
      }
      if (sameRow != null) {
        _resolveSameRow(sameRow);
      }
    });
    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: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.red, order: 1),
                  ),
                ),
                const TextSpan(text: ' و '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.orange, order: 2),
                  ),
                ),
                const TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.yellow, order: 3),
                  ),
                ),
                const TextSpan(text: ' ، لكنه معطل'),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.green, order: 4),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.blue, order: 5),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.purple, order: 6),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.pink, order: 7),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.lime, order: 8),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.teal, order: 9),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({super.key, required this.child});

  final Widget child;

  @override
  State<WidgetSpanWrapper> createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  void updateXOffset(double xOffset) {
    setState(() {
      offset = Offset(xOffset, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

class TestWidgetSpan extends StatelessWidget {
  final Color color;
  final int order;

  const TestWidgetSpan({super.key, required this.color, required this.order});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.5),
      width: 40,
      child: Center(child: Text(order.toString())),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('TextSpan Example'),
        ),
        body: Center(
          child: MyCustomText(),
        ),
      ),
    );
  }
}

class MyCustomText extends StatelessWidget {
  final children = [
    const TextSpan(
      text: 'خلال',
      style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    ),
    const WidgetSpan(
      style: TextStyle(fontSize: 15.0),
      child: Icon(key: Key("1"), Icons.star, color: Colors.red, size: 20),
    ),
    const TextSpan(
      text: ' مع وضع.',
      style: TextStyle(color: Colors.green, fontStyle: FontStyle.italic),
    ),
    const WidgetSpan(
      style: TextStyle(fontSize: 15.0),
      child: Icon(key: Key("2"), Icons.star, color: Colors.blue, size: 20),
    ),
    const TextSpan(
      text: ' خلال',
      style: TextStyle(color: Colors.brown, fontStyle: FontStyle.italic),
    ),
    const WidgetSpan(
      style: TextStyle(fontSize: 15.0),
      child: Icon(key: Key("3"), Icons.star, color: Colors.brown, size: 20),
    ),
    const TextSpan(
      text: ' الاجابة',
      style: TextStyle(color: Colors.red, fontStyle: FontStyle.italic),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: 'الاجابة هي',
        children: reverseWidgetSpans(children),
      ),
    );
  }

  List<InlineSpan> reverseWidgetSpans(List<InlineSpan> children) {
    List<int> widgetSpanIndices = [];
    for (int i = 0; i < children.length; i++) {
      if (children[i] is WidgetSpan) {
        widgetSpanIndices.add(i);
      }
    }

    List<InlineSpan> reversedChildren = List.from(children);
    for (int i = 0; i < widgetSpanIndices.length / 2; i++) {
      int start = widgetSpanIndices[i];
      int end = widgetSpanIndices[widgetSpanIndices.length - 1 - i];

      InlineSpan temp = reversedChildren[start];
      reversedChildren[start] = reversedChildren[end];
      reversedChildren[end] = temp;
    }

    return reversedChildren;
  }
}

here is flutter 3 version
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

class App extends StatelessWidget {
  const App({super.key});

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

double _getYOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;

  return box.localToGlobal(Offset.zero).dy;
}

double _getXOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;
  return box.localToGlobal(Offset.zero).dx;
}

void _resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
  var middle = (keys.length / 2.0).floor();
  for (int i = 0; i < middle; i++) {
    var a = keys[i];
    var b = keys[keys.length - i - 1];
    var left = _getXOffsetOf(a);
    var right = _getXOffsetOf(b);
    a.currentState!.updateXOffset(right - left);
    b.currentState!.updateXOffset(left - right);
  }
}

class TestWidgetSpans extends StatelessWidget {
  const TestWidgetSpans({super.key});

  @override
  Widget build(BuildContext context) {
    final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
    nextKey() {
      var key = GlobalKey<_WidgetSpanWrapperState>();
      keys.add(key);
      return key;
    }

    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      List<GlobalKey<_WidgetSpanWrapperState>>? sameRow;
      GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
      for (var key in keys) {
        if (_getYOffsetOf(key) == _getYOffsetOf(prev)) {
          sameRow ??= [prev];
          sameRow.add(key);
        } else if (sameRow != null) {
          _resolveSameRow(sameRow);
          sameRow = null;
        }
        prev = key;
      }
      if (sameRow != null) {
        _resolveSameRow(sameRow);
      }
    });
    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: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.red, order: 1),
                  ),
                ),
                const TextSpan(text: ' و '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.orange, order: 2),
                  ),
                ),
                const TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.yellow, order: 3),
                  ),
                ),
                const TextSpan(text: ' ، لكنه معطل'),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.green, order: 4),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.blue, order: 5),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.purple, order: 6),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.pink, order: 7),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.lime, order: 8),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.teal, order: 9),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({super.key, required this.child});

  final Widget child;

  @override
  State<WidgetSpanWrapper> createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  void updateXOffset(double xOffset) {
    setState(() {
      offset = Offset(xOffset, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

class TestWidgetSpan extends StatelessWidget {
  final Color color;
  final int order;

  const TestWidgetSpan({super.key, required this.color, required this.order});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.5),
      width: 40,
      child: Center(child: Text(order.toString())),
    );
  }
}

I don't know, it's not working.

here is flutter 3 version
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

class App extends StatelessWidget {
  const App({super.key});

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

double _getYOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;

  return box.localToGlobal(Offset.zero).dy;
}

double _getXOffsetOf(GlobalKey key) {
  final box = key.currentContext!.findRenderObject() as RenderBox;
  return box.localToGlobal(Offset.zero).dx;
}

void _resolveSameRow(List<GlobalKey<_WidgetSpanWrapperState>> keys) {
  var middle = (keys.length / 2.0).floor();
  for (int i = 0; i < middle; i++) {
    var a = keys[i];
    var b = keys[keys.length - i - 1];
    var left = _getXOffsetOf(a);
    var right = _getXOffsetOf(b);
    a.currentState!.updateXOffset(right - left);
    b.currentState!.updateXOffset(left - right);
  }
}

class TestWidgetSpans extends StatelessWidget {
  const TestWidgetSpans({super.key});

  @override
  Widget build(BuildContext context) {
    final keys = <GlobalKey<_WidgetSpanWrapperState>>[];
    nextKey() {
      var key = GlobalKey<_WidgetSpanWrapperState>();
      keys.add(key);
      return key;
    }

    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      List<GlobalKey<_WidgetSpanWrapperState>>? sameRow;
      GlobalKey<_WidgetSpanWrapperState> prev = keys.removeAt(0);
      for (var key in keys) {
        if (_getYOffsetOf(key) == _getYOffsetOf(prev)) {
          sameRow ??= [prev];
          sameRow.add(key);
        } else if (sameRow != null) {
          _resolveSameRow(sameRow);
          sameRow = null;
        }
        prev = key;
      }
      if (sameRow != null) {
        _resolveSameRow(sameRow);
      }
    });
    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: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.red, order: 1),
                  ),
                ),
                const TextSpan(text: ' و '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.orange, order: 2),
                  ),
                ),
                const TextSpan(text: ' ثم '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.yellow, order: 3),
                  ),
                ),
                const TextSpan(text: ' ، لكنه معطل'),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.green, order: 4),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.blue, order: 5),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.purple, order: 6),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.pink, order: 7),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.lime, order: 8),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
                WidgetSpan(
                  child: WidgetSpanWrapper(
                    key: nextKey(),
                    child: const TestWidgetSpan(color: Colors.teal, order: 9),
                  ),
                ),
                const TextSpan(text: ' اختبارات '),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class WidgetSpanWrapper extends StatefulWidget {
  const WidgetSpanWrapper({super.key, required this.child});

  final Widget child;

  @override
  State<WidgetSpanWrapper> createState() => _WidgetSpanWrapperState();
}

class _WidgetSpanWrapperState extends State<WidgetSpanWrapper> {
  Offset offset = Offset.zero;

  void updateXOffset(double xOffset) {
    setState(() {
      offset = Offset(xOffset, 0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: offset,
      child: widget.child,
    );
  }
}

class TestWidgetSpan extends StatelessWidget {
  final Color color;
  final int order;

  const TestWidgetSpan({super.key, required this.color, required this.order});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.5),
      width: 40,
      child: Center(child: Text(order.toString())),
    );
  }
}

I don't know, it's not working.

As a workaround I've found a while ago you can use this and not go with normal usage of widget span.
https://stackoverflow.com/questions/62929904/scrolling-to-a-textspan-inside-a-richtext/62988877#62988877

authors: AhmedNourJamalElDin FaisalMohammadi GIfatahTH M97Chahboun MostafaSolimanMO TahaTesser amirmhmdi darkmehmet darshankawar iapicca khaledelsherbiny masreplay mhorizon mhussin2008 mimbrown mohammadamir98 mohammadamirnm pedromassangocode salarazad sanekyy skippetr yuxiang-projz


text:
Gallery App - Android 6 - Google Play - Stuck in black startup screen

Steps to Reproduce
Device Samsung Galaxy A3, Android 6.0.1 - Google Play install of Gallery App flutter_gallery-bv0005-rc000

Open app, then the app stays stuck in a black screen mode, see attached screendump. The rest of the android environment works ok. The exit button, exits the app. After reboot and a re-install of the app, the bug remains. On this device 100% reproducible.

Note.
The bug was introduced with the upgraded to Android 6.0.1.

@chinmaygarde or @jason-simmons would know.
Looks like the A3 has a Adreno 306 GPU which is a very popular GPU and looks to be covered by Skia.  We've definitely seen this failure mode in other devices before.  @chinmaygarde might remember why.

Same behavior after update to flutter_gallery-bv0006-rc000

Sorry, just getting around to the device/GPU specific issues. I'll try to procure this device and check what is happening. In the meantime, do you happen to have the results of adb shell dumpsys SurfaceFlinger handy?

Great. I run the Gallery App on my normal use phone, just installing from Google Play.
From an Android terminal, with the Gallery App running.

dumpsys SurfaceFlinger
Error dumping service info: (Unknown error -2147483646) SurfaceFlinger

This app with builddate 2016-12-11 works with no problem
https://play.google.com/store/apps/details?id=com.yourcompany.cruisedeals

This will be resolved by https://github.com/flutter/flutter/issues/7983 when we push a new version of the gallery.

I'm going to close this as a dupe of https://github.com/flutter/flutter/issues/7983.  Thanks for the report!

Test with same device - Gallery version bv8-rc000, No lockup in startup screen. Confirmed working.

source: gharchive/issue

authors: chinmaygarde eseidelGoogle jonboj

repo: flutter/flutter

license_type: permissive

license_source: github-api


text:
[macOS] Launch isolate with an entrypoint from another library?

Use case
I'm trying to port the flutter_isolate plugin to macOS. On iOS, it uses the -runWithEntrypoint:libraryURI: function in FlutterEngine to launch an isolate with an entrypoint inside the plugin's Dart code - but this function doesn't seem to exist on macOS. Only -runWithEntrypoint: does, which can only launch isolates from the main library.
Futhermore, the FlutterCallbackCache and FlutterCallbackInformation classes seem to be missing, making it impossible to get information from a callback id.
Proposal
I'd like there to be a way on macOS to do what -runWithEntrypoint:libraryURI: can do on iOS.

I'm starting to look into this.
It looks like libraryURI is used to specify which file to look for main().
As a workaround, perhaps flutter_isolate can require that the function the isolate will launch into needs to be in main.dart? I'm curious if that will work.

btw, dart_ui_isolate now supports macOS
https://pub.dev/documentation/dart_ui_isolate/latest/


text:
Exception in thread "main" java.util.zip.ZipException: error in opening zip file

Newbie here
i am getting this exception while building gradle

Hi @usamabse048
Can you please delete all folders in %userprofile%\.gradle\wrapper\dists and provide your flutter doctor -v

Hi @usamabse048
Can you please delete all folders in %userprofile%\.gradle\wrapper\dists and provide your flutter doctor -v

I have deleted all the folders from dists

@hamdikahloun run flutter run -v please

Duplication of https://github.com/flutter/flutter/issues/51195

@usamabse048,
Please try above listed solution and see if it works for you.
Thanks.

Without additional information, we are unfortunately not sure how to resolve this issue.
We are therefore reluctantly going to close this bug for now.
Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.