Repository navigation
WidgetSpans in RTL text laying out LTR if they occur on the same line #54400
Description
Related issue: #111381
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!
Reacted by Ahmed Nour Jamal El-Din, Mohammad Amir Nejadmatoori, Mehmet Zahit Yılmaz, Aleksandr Yurkovskiy, Sergey Koltsov, Vasilii Dmitriev, Ilya Virnik, amirmhmdi, Ali Ammar, AhyaanTech-Dev and 15 more
Reacted by Mehmet Zahit Yılmaz, Mohammed CHAHBOUN and Andrew
Activity
iapicca commentedon Apr 13, 2020
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 commentedon Apr 13, 2020
Hi @iapicca, thanks for your response. I tried what you suggested and it did not resolve the problem.
Text.richjust builds theRichTextinternally, and from what I see in the source (lines 5103-5117, line 5164 here),RichTextdefaults 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 commentedon Apr 14, 2020
For some reason uneven layout
flutter doctor -v
AhmedNourJamalElDin commentedon Apr 27, 2020
Have you found any solution to this, @mimbrown ?
I'm also facing this issue
mimbrown commentedon Apr 27, 2020
Hi @AhmedNourJamalElDin, I ended up splitting my text on spaces and wrapping each individual word in its own
Textwidget, then laying out the paragraphs with aWrapwidget. 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.55 remaining items
[skparagraph] Fix bidirectional placeholder layout
[skparagraph] Fix bidirectional placeholder layout
molchanovia commentedon Oct 6, 2026
Hi, I fixed this behavior here and this is already in the main branch.
No changes to hit testing or ordering are required on the Flutter side. I'm adding tests for coverage here, although it might not be necessary since the changes were only in Skia #193894
I’d like some input from the Flutter team: this change explicitly corrects the order of spans, which could be a breaking change for users building apps with RTL languages. Should we highlight this in the changelog?
Open to discussion.
Revert "[skparagraph] Fix bidirectional placeholder layout"
Reland "[skparagraph] Fix bidirectional placeholder layout"
Add regression tests for WidgetSpan ordering in bidirectional text
Renzo-Olivares commentedon Oct 16, 2026
Hi @meg4cyberc4t, thank you for resolving this long standing issue!
I think we should definitely highlight this in the changelog! Since this fix targets long-standing buggy behavior that has been worked around / compensated for years(from 2020, and the Transform.translate swap from this thread now re-introduces the bug on 3.50), I'd suggest we treat it as a courtesy breaking change per Tree-hygiene. No contributed tests broke, but this is the "we can nonetheless imagine reasonable scenarios where developers would be affected negatively" case: c: API break label, an announcement, and a short migration guide. One note is that our compatibility policy points out we don't have a commitment to breaking changes in dependencies which Skia/SkParagraph are, but I think in this case it would be good to add visibility to this change given the age of the issue.
I think the closest precedent is the Impeller GLES render-to-texture top-down change in 3.47 (#186556): an engine-level fix for a long-standing orientation inconsistency, no API change, where shader authors had compensated with a Y-flip that the fix then inverted. It shipped with a migration guide (opengles-render-to-texture-top-down) that scopes exactly who is affected, and shows before/after.
I propose a small breaking change / migration guide using the standard template (under "Not yet released to stable", landed in 3.50.0‑0.1.pre), noting that WidgetSpans in RTL text now follow bidi visual order. The guidance would be: remove any compensation for the old source-order layout — Transform.translate/GlobalKey same-line swap hacks, reversed WidgetSpan source order for RTL, or mirrored placeholder-box x‑coordinates — since those now re-introduce the bug.
Add migration guide for WidgetSpan ordering in RTL text
Add migration guide for WidgetSpan ordering in RTL text (#13988)
Renzo-Olivares commentedon Oct 23, 2026
Closing as fixed since flutter/website#13988 has landed. Thank you @meg4cyberc4t for the great migration guide!
github-actions commentedon Nov 6, 2026
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.