[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

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!