如何在Flutter中隐藏Sqflite查询返回的null值并解决相关报错？

问题根源 #

你遇到的三类报错均是Dart空安全机制的强制校验导致，而界面显示null字符的原因是：对可空类型直接调用toString()时，null值会被转为字符串"null"，而非空白内容。 #

具体修复方案 #

1. Model层提前兜底（推荐） #

在数据解析阶段就把字符串类型的null值替换为空字符串，后续所有用到这些字段的场景都无需重复判空：

factory IngredienteModel.fromJson(Map<String, dynamic> json) =>
      IngredienteModel(
          idIngrediente: json["id_ingrediente"],
          idListaIngredientes: json["id_lista_ingredientes"],
          // 字符串字段null值兜底为空字符串
          amount: json["amount"] ?? '',
          unit: json["unit"] ?? '',
          name: json["name"] ?? '');

2. 修复食材列表Widget逻辑 #

增加列表空校验避免强制解包崩溃，同时去掉会生成"null"字符串的toString()调用：

List<Widget> ingredientesList(
    List<IngredienteModel>? ingredientes, BuildContext context) {
  // 空列表提前返回提示
  if (ingredientes == null || ingredientes.isEmpty) {
    return [const Text('暂无食材数据')];
  }
  final List<Widget> _listaIng = [];
  int _index = 1;
  for (var element in ingredientes) {
    final _widgetTemp = Row(
          children: [
            Text("$_index: "),
            // 若没做Model层兜底，这里改成 ${element.amount ?? ''} 即可
            Text('${element.amount} '),
            _unitText(element),
            // 若没做Model层兜底，这里改成 element.name ?? '' 即可
            Text(element.name),
          ],
        );
    _listaIng.add(_widgetTemp);
    _index++;
  }
  return _listaIng;
}

3. 修复_unitText方法逻辑 #

提前对unit做非空判断，同时用无尺寸空白组件替代空格Text减少冗余占位：

Widget _unitText(IngredienteModel ingmod) {
  final unit = ingmod.unit;
  // 同时处理null和空字符串两种场景
  if (unit == null || unit.isEmpty) {
    // 完全不占空间，不会产生多余空白
    return const SizedBox.shrink();
  }
  // 判空后Dart会自动将unit识别为非空类型，拼接不会报错
  return Text('$unit de ');
}

关键语法说明 #

• 空合并运算符 ??：左侧值为null时返回右侧默认值，可快速完成null场景兜底
• 类型提升：Dart空安全机制下，对可空变量执行if (unit == null)判断后，该变量在后续分支内会被自动识别为非空类型，无需额外校验
• 避免对可空类型直接调用toString()：null.toString()的固定返回值是字符串"null"，这是界面显示null字符的核心原因

内容的提问来源于stack exchange，提问作者Alain C. Jiménez