Flutter – Invalid Arabic characters With Utf-8 charset Retrived with http.get Flutter

dartflutter

Hi i'm trying to Fetch data from the internet in flutter and as long as all characters in response.body are English everything is fine but i get these results with persian/arabic characters.

Link to page i'm testing this with:
http://mobagym.com/media/mobagym-app-info/farsi.html
(I've also tested it with other urls and my api got the same results)

This is my code(I've also tried showing the result in a Text Widget):

static Future<String> loadFarsi() async{
    final response = await http.get("http://mobagym.com/media/mobagym-app-info/farsi.html",headers:{"charset":"utf-8","Accept-Charset":"utf-8"});
    print(response.body);
    return response.body;
  }

I've tried Remove the headers and still no luck.

final response = await http.get("http://mobagym.com/media/mobagym-app-info/farsi.html");

This is my log from android studio:

Performing hot reload...
Reloaded 7 of 507 libraries in 1,333ms.
I/flutter (23060): <html>
I/flutter (23060):     <head>
I/flutter (23060):         <meta charset="utf-8"/>
I/flutter (23060):     </head>
I/flutter (23060):     <body>سÙا٠ سÙا٠Ùر٠اÛپسÙÙ</body>
I/flutter (23060): </html>

This part is wrong:
سÙا٠سÙا٠Ùر٠اÛپسÙÙ

Though something like this is the actual text:
سلام سلام لرم ایپسوم

Testing on Android Phone Xperia z3 plus ( Android 6.0)

Using Android studio : 3.1.2

Using flutter : flutter_windows_v0.3.2-beta

Result showing the text in a text widget:

enter image description here

Best Answer

The web server's Content-Type header is Content-Type: text/html. Note that isn't including a charset suffix. It should be saying Content-Type: text/html; charset=utf-8. The package:http client looks for this charset when asked to decode to characters. If it's missing it defaults to LATIN1 (not utf-8).

As you've seen, setting the headers on the Request doesn't help, as it's the Response that does the decoding. Luckily, there's a simple fix. Just decode the bytes to String yourself like this.

Future<String> loadFarsi() async {
  final response =
      await http.get("http://mobagym.com/media/mobagym-app-info/farsi.html");
  String body = utf8.decode(response.bodyBytes);
  print(body);
  return body;
}
Related Topic