'Flutter Web Persian/Arabic Strings Not Showing Properly on the UI

I just started to migrate to Flutter web and just at the start point, encountered this strange problem. When using Persian/Arabic Characters in code, it would be shown improperly on the UI. Other Characters are shown nice.

Flutter Default Sample App

environment:
  sdk: ">=2.7.0 <3.0.0"

Code:

 children: <Widget>[
            Text(
              'You have pressed the button this many times:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              'شما این دکمه را این تعداد بار فشار داده اید:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              'ñĚĖĎÆß',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ], 

The Project and System Encoding are set to UTF-8.

Result: enter image description here



Solution 1:[1]

Its working fine on dartpad https://dartpad.dev/1904b824b83992867a0778a5a95f17f1?

Are you setting some wrong page encoding it must be utf-8

Solution 2:[2]

please remove the style in arabic text

Text(
 '??? ??? ???? ?? ??? ????? ??? ???? ???? ???:',          
),

their is fontwidth in style is the problem you getting error ( [][][][] )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dev
Solution 2 Jinto Joseph