I am building a Flutter app that is always forced to be RTL (via the MaterialApp builder hook). In the app I have content with inline buttons. I'm using Text.rich with WidgetSpans to put the buttons inline. However, when I have multiple WidgetSpans in a row, they are laying out LTR (see below for an example of three in a row).
What am I missing here? How can I get these to lay out in the correct direction?
Here's a sample showing the problem:
import 'package:flutter/material.dart';
void main() async {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Test(),
),
),
);
}
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Directionality(
textDirection: TextDirection.rtl,
child: Text.rich(
TextSpan(children: [
TextSpan(text: 'هذا اختبار'),
WidgetSpan(
child: Container(width: 10, height: 10, color: Colors.red)),
WidgetSpan(
child: Container(width: 10, height: 10, color: Colors.green)),
WidgetSpan(
child: Container(width: 10, height: 10, color: Colors.blue)),
]),
textDirection: TextDirection.rtl,
),
),
);
}
}
