Flutter Text Widget显示特殊字符及TikTok API乱码问题求助

问题根源 #

你遇到的乱码是字符编码解析错误导致的：API返回的是UTF-8编码的内容，但Flutter http 包默认会用系统默认编码（比如Latin1）解析响应体，非英文的Unicode字符（包括特殊花体字符、多语言文本）因此被错误解码，出现类似Ðе ÑоÑела的乱码。

解决方案 #

1. 手动指定UTF-8解码响应内容 #

直接使用utf8.decode解析原始字节数据，替代默认的response.body解析：

import 'dart:convert';
import 'package:http/http.dart' as http;

// 原headers和uri部分不变
Map<String, String> headers = {
  "X-RapidAPI-Host": "tiktok-downloader-download-tiktok-videos-without-watermark.p.rapidapi.com",
  "X-RapidAPI-Key": "-------------------------------",
};

final body = {'url': url};
final uri = Uri.https(
    "tiktok-downloader-download-tiktok-videos-without-watermark.p.rapidapi.com",
    '/vid/index',
    body);
final response = await http.get(
  uri,
  headers: headers,
);

if (response.statusCode == 200) {
  // 关键修改：用utf8解码原始字节
  String decodedBody = utf8.decode(response.bodyBytes);
  var data = jsonDecode(decodedBody);
  print(data['description'][0]); // 现在应该能正确显示特殊字符和多语言文本
}

2. 确保Text Widget支持特殊字体 #

部分花体字符（如𝒦ℋ𝒜ℒℰ𝒟）属于Unicode补充字符集，默认系统字体可能没有包含这些字符的字形，导致显示方块或空白。可以通过以下方式解决：

• 使用支持完整Unicode的字体：引入google_fonts包，使用Noto Sans系列字体（覆盖绝大多数Unicode字符）。
• 配置系统字体 fallback：在TextStyle中指定多个字体，让系统自动切换到支持该字符的字体。

示例（使用Google Fonts）：

import 'package:google_fonts/google_fonts.dart';

// 在Text Widget中使用
Text(
  data['description'][0],
  style: GoogleFonts.notoSans(
    fontSize: 16,
  ),
);

或者配置系统字体 fallback：

Text(
  data['description'][0],
  style: TextStyle(
    fontFamily: 'Roboto, Noto Sans, sans-serif',
    fontSize: 16,
  ),
);

内容的提问来源于stack exchange，提问作者Syed Irfan Hussaini