如何让PlutoGrid数字列将null值显示为空而非0？

针对你遇到的PlutoGrid数字列自动将null转为0的问题，这里有几个无需切换到文本列的解决方案：

方案1：配置Number类型的null处理参数 #

PlutoGrid的PlutoColumnType.number()支持通过参数控制null值的处理逻辑，直接配置即可保留null并自定义显示：

PlutoColumn(
  title: "number",
  field: "number",
  type: PlutoColumnType.number(
    nullValue: null, // 禁止自动将null转为0
    formatter: (value) {
      // null时显示空字符串，非null正常展示数字
      return value == null ? '' : value.toString();
    },
    parser: (text) {
      // 用户输入空内容时转为null，否则解析为double
      if (text.isEmpty) return null;
      return double.tryParse(text);
    },
  ),
),

方案2：自定义支持nullable的数字列类型 #

如果默认配置不生效，可以自定义列类型，覆盖默认的null转0逻辑：

// 自定义可空数字列类型
class PlutoNullableNumberColumnType extends PlutoColumnType {
  PlutoNullableNumberColumnType() : super.number();

  @override
  dynamic cast(dynamic value) {
    // 保留null，非null时尝试转为double
    if (value == null) return null;
    return double.tryParse(value.toString());
  }
}

然后在列中使用这个自定义类型：

PlutoColumn(
  title: "number",
  field: "number",
  type: PlutoNullableNumberColumnType(),
),

方案3：自定义渲染器获取原始值 #

如果之前的自定义渲染器拿到的是转后的0，可以尝试从cell的原始值获取真实null：

PlutoColumn(
  title: "number",
  field: "number",
  type: PlutoColumnType.number(),
  renderer: (rendererContext) {
    final rawValue = rendererContext.cell.originalValue;
    return Text(rawValue == null ? '' : rawValue.toString());
  },
),

修改后的完整示例代码 #

return PlutoGrid(
  columns: [
    PlutoColumn(
      title: "text",
      field: "text",
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: "number",
      field: "number",
      type: PlutoColumnType.number(
        nullValue: null,
        formatter: (value) => value == null ? '' : value.toString(),
        parser: (text) => text.isEmpty ? null : double.tryParse(text),
      ),
    ),
  ],
  rows: [
    PlutoRow(
      cells: {
        'text': PlutoCell(value: 'Text 1'),
        'number': PlutoCell(value: 1),
      },
    ),
    PlutoRow(
      cells: {
        'text': PlutoCell(value: 'Text 2'),
        'number': PlutoCell(value: null),
      },
    ),
    PlutoRow(
      cells: {
        'text': PlutoCell(value: 'Text 3'),
        'number': PlutoCell(value: 3),
      },
    ),
  ],
);

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