FlutterFlow自定义组件无引号API数据转合法JSON格式问题

问题核心 #

你遇到的问题本质是对图表参数的类型要求理解有误：API返回的非标准格式数据若已被FlutterFlow解析为Dart的List<Map<String, dynamic>>对象，jsonEncode生成的JSON字符串并非图表所需的输入类型——图表组件的data参数通常接收Dart集合对象（List/Map），而非JSON字符串，直接传递编码后的字符串会导致类型不匹配异常。

分步解决方案 #

1. 先确认数据类型 #

在代码中添加日志，明确widget.chartData的实际类型：

print('chartData类型: ${widget.chartData.runtimeType}');
print('chartData内容: $widget.chartData');

如果输出为List<Map<String, dynamic>>，说明FlutterFlow已经自动将非标准格式转成了合法的Dart对象，无需再做编码处理。

2. 直接传递Dart对象给图表 #

修改图表的data参数，直接传入原数据：

data: widget.chartData ?? defaultData

注意：如果defaultData是JSON字符串格式，需要将其转换为Dart对象，比如：

// 定义Dart类型的默认数据
final defaultData = [
  {"name": "默认用户", "value": 10},
  {"name": "测试用户", "value": 8}
];

// 传入图表
data: widget.chartData ?? defaultData

3. 若widget.chartData是原始未解析字符串 #

如果API返回的原始字符串未被FlutterFlow解析（比如值为"[{name: John Doe, value: 12}, ...]"），需要先修复非标准格式为合法JSON，再解析为Dart对象：

// 修复非标准JSON：给键和字符串值添加双引号
String fixNonStandardJson(String input) {
  // 匹配{name: 格式，替换为{"name":
  input = input.replaceAll(RegExp(r'([{,]\s*)(\w+)(\s*:)'), r'$1"$2"$3');
  // 匹配: John Doe, 格式，替换为: "John Doe",
  input = input.replaceAll(RegExp(r':\s*([a-zA-Z\s]+)(\s*[,}])'), r': "$1"$2');
  return input;
}

// 使用示例
final fixedJson = fixNonStandardJson(widget.chartData);
final parsedData = jsonDecode(fixedJson) as List<dynamic>;

// 传给图表
data: parsedData ?? defaultData

4. 异常定位 #

如果仍有报错，添加异常捕获日志排查：

try {
  final targetData = widget.chartData ?? defaultData;
  print('传入图表的最终数据: $targetData');
  // 图表组件初始化代码
} catch (e, stackTrace) {
  print('图表数据错误: $e');
  print('错误栈: $stackTrace');
}

关键提示 #

• 绝大多数Flutter图表库的data参数都要求接收Dart集合对象，而非JSON字符串，不要混淆两者的区别。
• FlutterFlow在处理外部数据源时，多数场景会自动完成非标准格式到Dart对象的转换，优先确认数据类型再做后续处理。

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