使用Flutter SvgPicture组件时出现黑屏错误问题咨询

问题原因及解决方案 #

• 原因1：上层主题样式的颜色覆盖了SVG原有颜色
  Flutter的SvgPicture默认会继承上层IconTheme或DefaultTextStyle的color属性，如果你的SVG内部使用了currentColor作为填充色，就会被默认的黑色覆盖，显示为全黑。
  解决方法：给SvgPicture.network添加colorFilter属性，明确指定不需要继承外部颜色，保留SVG原有颜色：

  Container(
    height: 100,
    width: 100,
    child: SvgPicture.network(
      _controller._cargoDocumentPrint.value!.orderCargo![0].cargoPlatform!.platformLogo!,
      fit: BoxFit.cover,
      // 新增这行，禁止外部颜色覆盖
      colorFilter: null,
      // 上面配置无效的话可以尝试用透明色混合模式
      // colorFilter: const ColorFilter.mode(Colors.transparent, BlendMode.src),
    ),
  )
  

• 原因2：SVG资源本身异常
  即使API返回状态正常，也可能返回的SVG内容不合法，或者内部填充色本身就是黑色。你可以把请求到的SVG链接直接复制到浏览器地址栏打开，确认SVG本身显示是否正常，也可以检查SVG代码里的fill属性是否全部为#000000。
• 原因3：加载失败未触发错误提示
  默认状态下加载失败SvgPicture可能显示空白或者黑色块，你可以添加错误回调确认是否加载成功：

  SvgPicture.network(
    // 其余属性保持不变
    errorBuilder: (context, error, stackTrace) {
      print('SVG加载错误：$error');
      return const Icon(Icons.broken_image, size: 50);
    },
  )
  

• 原因4：布局适配问题
  你当前使用BoxFit.cover会拉伸SVG铺满容器，如果SVG的viewBox属性设置异常，可能导致内容被裁剪，只显示到SVG的黑色背景部分。可以尝试把fit属性改为BoxFit.contain排查是否是适配问题。

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