[Flutter] サーバーデータの日本語、韓国語の文字化けの修正

概要

Flutterでサーバーとやり取りをする時、httpパッケージを使います。

httpパッケージ: https://pub.dev/packages/http

この時、サーバーからもらったJSONデータの日本語や韓国語を画面に表示する時、文字化けされる問題が発生する時があります。今回のブログポストではhttpパッケージを使ってサーバーからもらったJSONデータの日本語や韓国語が文字化けされ表示される問題を解決する方法について説明します。

httpからデータを貰う

Flutterでは普通次のようにhttpパッケージを使ってサーバーからデータをもらってきます。

import 'package:http/http.dart' as http;
...
final httpClient = http.Client();
...
final url = Uri.parse('${ENV.apiServer}/data');
final response = await httpClient.post(
  url,
  headers: {
    'Authorization': 'Bearer $token',
    'Content-Type': 'application/json; charset=UTF-8',
  },
  body: jsonEncode(
    {
      ...
    },
  ),
);

final data = jsonDecode(response.body);
print(data['error_message']);

この時、サーバーからもらったデータが英語の場合、次のように問題なくデータが表示されます。

flutter: server error

日本語や韓国語が含まれた場合

しかし、サーバーからもらったデータが日本語または韓国語の場合、次のように文字化けされて表示されることが確認できます。今回のブログポストではサーバーエラーと言う日本語をもらった場合についてみてみます。

# flutter: サーバーエラー
flutter: ãµã¼ãã¼ã¨ã©ã¼

utf8.decode

このようにサーバーからもらったデータが文字化けする場合、次のようにutf8.decodeを使って問題を解決することができます。

import 'dart:convert';
...
final response = await httpClient.post(
  ...
);

final data = jsonDecode(utf8.decode(response.bodyBytes));
print(data['error_message']);

このようにコードを修正して、データを確認すると次のようにデータがうまく表示されることが確認できます。.

flutter: サーバーエラー

完了

これでFlutterでhttpパッケージを使ってサーバーからもらったデータ中の日本語や韓国語が文字化けする問題を解決するためutf8.decodeを使う方法についてみてみました。もし、サーバーからもらったデータの文字がちゃんと表示されない場合、utf8.decodeを使ってみてください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！