Repository navigation
RichText with WidgetSpan in RTL layout will be misplaced #111381
Description
The result is shown in the image:
The reproduction code is as follows：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage());
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
body: Center(
child: RichText(
text: TextSpan(
style: TextStyle(
backgroundColor: Colors.black.withOpacity(0.5), fontSize: 30),
children: [
WidgetSpan(
child: Container(color: Colors.red, width: 20, height: 20)),
const TextSpan(text: '1-AQWER'),
WidgetSpan(
child: Container(color: Colors.green, width: 50, height: 20)),
const TextSpan(text: '2-BNMVC')
],
)))));
}
}I tested it on macos, ios and android. The problem can even be reproduced online at https://dartpad.dev/.
Reacted by olof-dev, Mohamed Hurab, Shady Boshra, skippetr, Andrew, Nour Ahmed, iskamal, navidprox and Raphaël Pinel
Activity
exaby73 commentedon Sep 12, 2022
Triage report
I can reproduce this issue. This specific text and others like it seem to trigger this bug. Basically, have a
-as the second character and this bug would be reproducible.Info
Screenshot
Code Sample
Flutter Doctor
flutter doctor -v(Stable)flutter doctor -v(Master)jason-simmons commentedon Sep 23, 2022
Looked at how this is handled in SkParagraph and found a few issues:
OneLineShaper::iterateThroughShapingRegionswas failing an assert because it was attempting to shape placeholder regions that mapped to an empty block range.OneLineShaper::iterateThroughShapingRegionswas hardcoding the same bidi level for every placeholder. The placeholder's bidi level should match the level of the bidi region that contains the placeholder.TextLineconstructor was reordering the placeholders based on the visual order of the bidi regions. The Flutter framework was painting placeholder widgets in the wrong locations because it assumes that the placeholders remain in the order in which they were added to the input. ThegetRectsForPlaceholdersAPI has no way to indicate that a placeholder was moved due to bidi reordering.Proposed fix: https://skia-review.googlesource.com/c/skia/+/584540
Fix issues affecting layout of placeholders in RTL text
olof-dev commentedon Nov 2, 2022
@jason-simmons thanks for the proposed fix! Do you think the same fix will solve #54400, which is also about incorrectly placed WidgetSpans in RTL?
Any advice on how long the Skia fix will take to propagate into Flutter? (This issue is unfortunately preventing our app from supporting RTL languages. Will look into forking if it'll be a while before this makes it into Flutter.)
mhussin2008 commentedon Nov 24, 2023
https://github.com/mhussin2008/forqan_updated.git
mohanadshaban commentedon Aug 14, 2024
This issue is still active and not solved ?
3bua7m3d commentedon Aug 15, 2024
Why hasn't this issue been resolved yet, despite it being old and important for supporting the Arabic language?
olof-dev commentedon Aug 15, 2024
Remember to put a thumbs up on the original issue if you want to highlight it for the Flutter team's attention. I've put the OP's example in a DartPad gist to make it easy to see how things look now:
https://dartpad.dev/?id=fbf6e013c2dfd0fd33237e53b2d316b9
It renders differently now to the picture in the original post (at least on web):
What is the expected result for the OP code? Things that look strange to me, without being a bidi expert:
WidgetSpans andTextSpans look to be in the wrong order.M97Chahboun commentedon Aug 26, 2024
any update about this issue ?
iskamal commentedon Mar 6, 2025
any updates?
raphaelpinel commentedon Mar 25, 2025
This is an important issue for rtl languages and it would be nice to have it fixed.
For example, a
SizedBoxbetween a text and an icon inside the children of aTextSpanseem to be not visible with rtl languages.I wanted to have a text that flows on multiple lines, an icon at the end, and some gap in between.
Workaround that worked for me was to wrap the icon with a
Containerwith padding. Note that wrapping theTextSpanwith aPaddingdidn't work, as it was putting the text and the icon on 2 different lines.Renzo-Olivares commentedon Mar 18, 2026
The above image seems to be the expected behavior on the web given the example below.
Looks like we still need to adjust the widgetspan order.
Renzo-Olivares commentedon Mar 18, 2026
This issue given the comment above regarding the current state of the issue seems like a duplicate of #54400. I'll close this for now, but feel free to re-open if this is not the case.
github-actions commentedon Apr 1, 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.