Flutter: Text.rich widget is revers the WidgetSpan if you add arabic text

Question

please can any one help me? Text.rich widget does not work successfully with arabic text. there are a problem with the text direction. lets give an example when i run the app the order of the container in the below code is come reverse that is a big problem for me

Text.rich(
                TextSpan(
                  children: [
                    TextSpan(text: 'بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ'),
                    WidgetSpan(
                      child: Container(
                        width: 30,
                        height: 30,
                        color: Colors.green,child:Text('1'),
                      ),
                    ),
                    TextSpan(text: 'ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَٰلَمِينَ'),
                    WidgetSpan(
                      child: Container(
                        width: 30,
                        height: 30,
                        color: Colors.blue,child:Text('2'),
                      ),
                    ),
                    TextSpan(text: 'ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ'),
                    WidgetSpan(
                      child: Container(
                        width: 30,
                        height: 30,
                        color: Colors.red,child:Text('3'),
                      ),
                    ),
                  ],
                ),
                textDirection: TextDirection.rtl,
              )

Answer 1

Sometimes the most difficult problems can be solved by very simple things. There may be many long and difficult ways to solve this problem.

[https://github.com/flutter/flutter/issues/54400#issuecomment-662558160][1]

But the simplest way that i found is

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Quran',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Quran Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   List<Widget> wrapList(List m) {
    List<Widget> myList = [];
    for (var i in m) {
      String a = i['text'] as String;
      int b = i['num'];
      List l2 = a.split(' ');
      myList.addAll(List.generate(l2.length, (e) {
        return Text(
          e == l2.length - 1 ? '${l2[e]}' : '${l2[e]} ',
          style: const TextStyle(fontSize: 18),
        );
      }));
      myList.add(
        Container(
          alignment: Alignment.center,
          width: 20,
          height: 20,
          child: Text("$b"),
          decoration: const BoxDecoration(
            color: Colors.green,
          ),
        ),
      );
    }
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Wrap(
        children: wrapList([
          {'text': 'بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ', 'num': 1},
          {'text': 'ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَٰلَمِينَ', 'num': 2},
          {'text': 'ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ', 'num': 3},
          {'text': 'مَٰلِكِ يَوۡمِ ٱلدِّينِ', 'num': 4},
          {'text': 'إِيَّاكَ نَعۡبُدُ وَإِيَّاكَ نَسۡتَعِينُ', 'num': 5},
          {'text': 'ٱهۡدِنَا ٱلصِّرَٰطَ ٱلۡمُسۡتَقِيمَ', 'num': 6},
          {
            'text':
                'صِرَٰطَ ٱلَّذِينَ أَنۡعَمۡتَ عَلَيۡهِمۡ غَيۡرِ ٱلۡمَغۡضُوبِ عَلَيۡهِمۡ وَلَا ٱلضَّآلِّينَ',
            'num': 7
          },
        ]),
        textDirection: TextDirection.rtl,
        crossAxisAlignment: WrapCrossAlignment.center,
      ),
      ),
    );
  }
}