Multiple WidgetSpans in a row not respecting Directionality

Viewed 235

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).

Three WidgetSpans in a row, layed out in the wrong direction

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,
        ),
      ),
    );
  }
}
1 Answers

I've gone around this issue by not using WidgetSpans.

You could use font icons and use the icons inside a TextSpan instead of a WidgetSpan.

Related