how to achive justify-center with rich text in flutter

Question

Align property in rich text widget have right,left,center and justify,

when using center it gave me centered text without justifying it and when using justify it gave me ltr justify.

this code:

RichText(
      textAlign:TextAlign.center,
      text:TextSpan(
        children:[
          TextSpan(text: 'مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍۢ لَّا يُبْصِرُونَ, صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ, أَوْ كَصَيِّبٍۢ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ'),
          TextSpan(text:'وَإِن كُنتُمْ فِى رَيْبٍۢ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُواْ بِسُورَةٍۢ مِّن مِّثْلِهِۦ وَٱدْعُواْ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ, فَإِن لَّمْ تَفْعَلُواْ وَلَن تَفْعَلُواْ فَٱتَّقُواْ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ')
    ]))

gave this:

and this code:

RichText(
      textAlign:TextAlign.justify,
      text:TextSpan(
        children:[
          TextSpan(text: 'مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍۢ لَّا يُبْصِرُونَ, صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ, أَوْ كَصَيِّبٍۢ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ'),
          TextSpan(text:'وَإِن كُنتُمْ فِى رَيْبٍۢ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُواْ بِسُورَةٍۢ مِّن مِّثْلِهِۦ وَٱدْعُواْ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ, فَإِن لَّمْ تَفْعَلُواْ وَلَن تَفْعَلُواْ فَٱتَّقُواْ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ')
    ]))

gave this:

how can i make the align of the text is both, justify and center especially with arabic text like this:

Answer 1

You can use softWrap & textAlign property of RichText widget to center align and wrap the content text accordingly.

example:

RichText(
      softWrap:true,
      textAlign:TextAlign.center,
      text:TextSpan(
        style:TextStyle(color: Colors.orange),
        children:[
          TextSpan(text: 'كن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار'),
          TextSpan(text:' الحصول على ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد أن يشعر بالسعادة التي لا تشوبها عواقب أليمة ')
    ]))

ouput:

Answer 2

Perhaps you might need to set the textDirection property of your RichText widget:

RichText(
    textAlign:TextAlign.justify,
    textDirection: TextDirection.rtl //<-- Add this
    text:TextSpan(
      children:[
        TextSpan(text: 'مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍۢ لَّا يُبْصِرُونَ, صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ, أَوْ كَصَيِّبٍۢ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ'),
        TextSpan(text:'وَإِن كُنتُمْ فِى رَيْبٍۢ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُواْ بِسُورَةٍۢ مِّن مِّثْلِهِۦ وَٱدْعُواْ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ, فَإِن لَّمْ تَفْعَلُواْ وَلَن تَفْعَلُواْ فَٱتَّقُواْ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ')
    ],
  ),
)

Answer 3

My understanding answer what you want to do in flutter, code example is below.

Text('my String', textAlign: TextAlign.justify)