使用flutter_chat_ui时带重音字符显示异常的问题

问题分析 #

你遇到的重音字符显示为特殊字符的问题，核心并非flutter_chat_ui包本身的编码设置问题，而是服务器响应的字符解码错误或JSON转Message对象时的映射不规范导致的。默认情况下，http包的response.body会用Latin1编码解码响应内容，若服务器返回的是UTF-8格式的含重音字符文本，就会出现乱码。

解决方案 #

1. 手动以UTF-8解码服务器响应体 #

修改获取消息的代码，先用utf8.decode处理响应的字节数据，再解析JSON，同时正确将JSON映射为types.Message实例：

// 需导入dart:convert包
import 'dart:convert';

startGetChatMessages() async{
  chatMessages().then((value){
    // 用bodyBytes解码为UTF-8字符串，避免默认编码导致的乱码
    String responseBody = utf8.decode(value.bodyBytes);
    List result = json.decode(responseBody);
    setState(() {
      _messages = result.map((msgJson) {
        // 通过fromJson方法正确转换为TextMessage对象
        return types.TextMessage.fromJson(msgJson);
      }).toList();
    });
  }).catchError((onError){
      // 错误处理逻辑
  });
}

2. 确保服务器返回正确的编码头 #

检查服务器接口的响应头，必须包含Content-Type: application/json; charset=utf-8，明确告知客户端响应内容采用UTF-8编码。

3. 发送消息时保持UTF-8编码一致性 #

发送消息到服务器时，在请求头中指定UTF-8编码，避免服务器端解析错误：

// 示例发送请求代码
Future<void> sendMessage(String text) async {
  await http.post(
    Uri.parse('你的消息接口地址'),
    headers: {
      'Content-Type': 'application/json; charset=utf-8', // 强制UTF-8编码
    },
    body: json.encode({
      'text': text,
      'authorId': widget.userMe.id,
      // 其他消息字段
    }),
  );
}

关键说明 #

flutter_chat_ui本身完全支持UTF-8字符渲染，无需额外修改包的编码设置。问题的本质是数据在传输、解析环节的编码不匹配，只要确保从请求到响应全链路采用UTF-8编码，同时正确将JSON数据映射为对应的Message对象，重音字符就能正常显示。

内容的提问来源于stack exchange，提问作者Gedeon Mutshipayi