Flutter Web调试模式构建Card组件时出现类型错误：预期'SkDeletable'类型值，实际得到Null

这个错误我之前在Flutter Web的Debug模式下也踩过坑，根源大概率出在你代码里的BackdropFilter组件上，具体就是ImageFilter.blur(sigmaX: 0, sigmaY: 0)这一行。

为什么会出现这个问题？ #

Flutter Web的Debug模式默认用CanvasKit渲染器，当你把模糊参数sigmaX和sigmaY都设为0时，底层Skia库会尝试创建一个模糊滤镜，但参数为0的场景下会返回null。Debug模式的类型校验非常严格，直接就抛出了类型不匹配的错误；而Release模式做了容错优化，所以没触发这个问题。

可行的修复方案 #

你可以根据自己的需求选下面的任意一种：

• 方案一：直接移除无用的BackdropFilter
  既然sigma值都是0，这个滤镜完全没有实际效果，删掉它不会影响UI表现，还能简化代码：

  // 去掉BackdropFilter，直接保留内层Container
  Container(
    decoration: BoxDecoration(color: darkBlue.withOpacity(0.8)),
    child: Stack(
      // 原有子组件代码不变
      children: [
        Positioned(/* ... */),
        Positioned(/* ... */)
      ],
    ),
  )
  

• 方案二：用极小值替代0
  如果后续需要动态调整模糊值，必须保留BackdropFilter，可以把sigma设为一个极小的数值（比如0.001），这样既不会产生可见的模糊效果，又能避免Skia返回null：

  BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 0.001, sigmaY: 0.001),
    child: Container(
      // 原有子组件代码不变
    ),
  )
  

• 方案三：根据环境动态控制渲染
  可以通过kDebugMode判断环境，Debug模式下跳过BackdropFilter，Release模式下正常渲染：

  import 'package:flutter/foundation.dart';
  
  // ... 其他代码
  child: kDebugMode 
      ? Container(
          decoration: BoxDecoration(color: darkBlue.withOpacity(0.8)),
          child: Stack(/* 原有子组件 */),
        )
      : BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
          child: Container(/* 原有子组件 */),
        ),
  

额外检查建议 #

顺便确认下servicesBackgrounds[3]对应的图片路径是否正确，虽然这个错误和图片无关，但Debug模式下资源加载的严格性也可能间接引发问题——不过从错误类型来看，最核心的原因还是BackdropFilter的参数问题。

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