Flutter Question posted in
The official Flutter documentation can be found here.

How to display special characters in Flutter from API?

The following code does not display special characters and instead just returning the Unicode of the characters. For example instead of showing æ the code is returning just u00e6.

After some googling, I have tried adding 'Content-Type': 'multipart/form-data; charset=utf-8', in the headers and even tried using utf8.decode() inside the json.decode and outside. The difference it made was when I used utf8.decode() on dnContent the dialog did not show.

My code:

Future<void> fetchDialogData() async {
    var headers = AppConstants.apiHeaders;
    var request = http.MultipartRequest(
        'POST',
        Uri.parse(
            '${AppConstants.baseUrl}${AppConstants.homeSpecialMsgEndpoint}'));
    request.fields.addAll(AppConstants.apiBody);
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      var responseBody = await response.stream.bytesToString();
      final data = json.decode(responseBody);
      final nestedDescriptionData =
          data['response']['RESULT'][0]['description'];
      print('MY DATA: $nestedDescriptionData');
      final dnRegex = RegExp(r'"dn":"(.*?)"');
      final match = dnRegex.firstMatch(nestedDescriptionData);

      if (match != null) {
        final dnContent = (match.group(1) ?? '').replaceAll(r'rn', 'n');

        setState(() {
          _dnContent = dnContent;
        });
        _showWelcomeDialog(_dnContent);
      } else {}
    } else {}
  }

  void _showWelcomeDialog(String dnContent) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Welcome'),
          content: Text(
            dnContent,
            style: const TextStyle(fontSize: 12),
          ),
          actions: [
            Align(
              alignment: Alignment.bottomRight,
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('close'),
              ),
            ),
          ],
        );
      },
    );
  }
Tags:

2

Answers


  1. 0

    Here are a few approaches for resolving the Unicode display problem:

    1. Use json.decode() with UTF-8 decoding:
    Future<void> fetchDialogData() async {
    var headers = AppConstants.apiHeaders;
    var request = http.MultipartRequest(
        'POST',
        Uri.parse(
            '${AppConstants.baseUrl}${AppConstants.homeSpecialMsgEndpoint}'));
    request.fields.addAll(AppConstants.apiBody);
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      var responseBody = await response.stream.bytesToString();
      
      // Decode using UTF-8
      final data = json.decode(utf8.decode(responseBody.codeUnits));
      
      final nestedDescriptionData =
          data['response']['RESULT'][0]['description'];
      print('MY DATA: $nestedDescriptionData');
      final dnRegex = RegExp(r'"dn":"(.*?)"');
      final match = dnRegex.firstMatch(nestedDescriptionData);

      if (match != null) {
        final dnContent = (match.group(1) ?? '').replaceAll(r'rn', 'n');

        setState(() {
          _dnContent = dnContent;
        });
        _showWelcomeDialog(_dnContent);
      }
    }
  }
    1. If the above doesn’t work, try using dart:convert‘s jsonDecode with explicit UTF-8 decoding:
    import 'dart:convert';

Future<void> fetchDialogData() async {
    var headers = AppConstants.apiHeaders;
    var request = http.MultipartRequest(
        'POST',
        Uri.parse(
            '${AppConstants.baseUrl}${AppConstants.homeSpecialMsgEndpoint}'));
    request.fields.addAll(AppConstants.apiBody);
    request.headers.addAll(headers);

    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      var responseBody = await response.stream.bytesToString();
      
      // Alternative decoding method
      final data = jsonDecode(utf8.decode(responseBody.codeUnits));
      
      final nestedDescriptionData =
          data['response']['RESULT'][0]['description'];
      print('MY DATA: $nestedDescriptionData');
      final dnRegex = RegExp(r'"dn":"(.*?)"');
      final match = dnRegex.firstMatch(nestedDescriptionData);

      if (match != null) {
        // Use Uri.decodeComponent to handle URL-encoded characters
        final dnContent = Uri.decodeComponent(
          (match.group(1) ?? '').replaceAll(r'rn', 'n')
        );

        setState(() {
          _dnContent = dnContent;
        });
        _showWelcomeDialog(_dnContent);
      }
    }
  }
    1. If you’re dealing with escaped Unicode characters, you might want to use a custom decoder:
    String decodeUnicode(String input) {
  return input.replaceAllMapped(
    RegExp(r'\u([0-9a-fA-F]{4})'),
    (match) => String.fromCharCode(int.parse(match.group(1)!, radix: 16)),
  );
}

Future<void> fetchDialogData() async {
    // ... previous code ...

    if (response.statusCode == 200) {
      var responseBody = await response.stream.bytesToString();
      
      final data = json.decode(responseBody);
      final nestedDescriptionData =
          data['response']['RESULT'][0]['description'];
      
      final dnRegex = RegExp(r'"dn":"(.*?)"');
      final match = dnRegex.firstMatch(nestedDescriptionData);

      if (match != null) {
        // Decode Unicode characters
        final dnContent = decodeUnicode(
          (match.group(1) ?? '').replaceAll(r'rn', 'n')
        );

        setState(() {
          _dnContent = dnContent;
        });
        _showWelcomeDialog(_dnContent);
      }
    }
  }
    1. Ensure proper headers and encoding:
    var headers = {
  ...AppConstants.apiHeaders,
  'Accept-Charset': 'utf-8',
  'Content-Type': 'application/json; charset=utf-8',
};

    Additional Debugging Tips:

    • Print out responseBody before decoding to see its exact content
    Login or Signup to reply.
  2. 0

    I think you should decode the data with utf8.decode before decoding into json.

    var responseBody = await response.stream.bytesToString();
final decodedBody = utf8.decode(responseBody);
final data = json.decode(responseBody);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search