CODEWITHSUNDEEP
dartflutter
behzad.robot
behzad.robot

Reputation: 707

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

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

Upvotes: 36

Views: 18379

Answers (2)

Efe
Efe

Reputation: 880

To be clean, you can write a utility function like jsonDecodeUtf8 :

json_util.dart

dynamic jsonDecodeUtf8(List<int> codeUnits,
        {Object reviver(Object key, Object value)}) =>
    json.decode(utf8.decode(codeUnits), reviver: reviver);

and use it like:

String body = jsonDecodeUtf8(response.bodyBytes);

Upvotes: 1

Richard Heap
Richard Heap

Reputation: 51682

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;
}

Upvotes: 86

Related Questions