title: Flutter: Text.rich widget is revers the WidgetSpan if you add arabic text
body: <p><a href="https://i.stack.imgur.com/ZM17o.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZM17o.jpg" alt="the green container is should be in the red and there is in the green." /></a>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</p>
  <pre><code>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,
                )
  </code></pre>