修改SVG勾选部分颜色后在Flutter中不生效的解决咨询

你遇到的问题是因为Flutter默认的Image.asset加载SVG时，会将其栅格化为位图，对SVG内部的CSS类样式支持有限，导致修改的颜色无法正确生效。以下是两种可行的解决方法：

方法一：直接修改SVG的fill属性（无需依赖第三方库） #

直接将勾选图标的fill属性写在对应的<path>标签上，避免使用CSS类样式，这样Flutter加载时能直接识别颜色：

修改后的SVG代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
<g>
    <path d="M394.7,512H117.3C52.6,511.9,0.1,459.4,0,394.7V117.3C0.1,52.6,52.6,0.1,117.3,0h277.3C459.4,0.1,511.9,52.6,512,117.3
        v277.3C511.9,459.4,459.4,511.9,394.7,512z M117.3,64C87.9,64,64,87.9,64,117.3v277.3c0,29.5,23.9,53.3,53.3,53.3h277.3
        c29.5,0,53.3-23.9,53.3-53.3V117.3c0-29.5-23.9-53.3-53.3-53.3H117.3z"/>
    <path fill="#FF2D78" d="M206.2,379.5c-13.5,0-26.4-5.4-35.8-14.9l-63.7-63.6c-12.5-12.5-12.5-32.8,0-45.3c0,0,0,0,0,0l0,0
        c12.5-12.5,32.8-12.5,45.2,0l54.3,54.3l153.9-153.9c12.5-12.5,32.8-12.5,45.2,0l0,0c12.5,12.5,12.5,32.8,0,45.3c0,0,0,0,0,0
        L242,364.6C232.6,374.2,219.7,379.5,206.2,379.5z"/>
</g>
</svg>

替换原文件后，重新运行项目即可看到粉色勾选框。

方法二：使用flutter_svg库（支持复杂SVG样式） #

如果需要保留SVG的类样式结构，或者需要动态修改颜色，可以使用flutter_svg库，它能完整解析SVG的样式和结构：

1. 添加依赖：在pubspec.yaml中加入：

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.9 # 请替换为最新版本

执行flutter pub get安装依赖。

2. 加载SVG：在代码中导入库并使用SvgPicture.asset加载：

import 'package:flutter_svg/flutter_svg.dart';

// 在Widget树中使用
SvgPicture.asset(
  'assets/your_checkbox.svg', // 替换为你的SVG路径
  width: 48,
  height: 48,
),

该方法会正确识别SVG内部的.st0类样式，显示粉色勾选框。如果需要动态修改勾选部分颜色，还可以通过ColorFilter实现（仅当SVG的目标路径未固定fill颜色时生效）：

SvgPicture.asset(
  'assets/your_checkbox.svg',
  colorFilter: ColorFilter.mode(Colors.pinkAccent, BlendMode.srcIn),
  width: 48,
  height: 48,
),

额外检查 #

确保pubspec.yaml中的assets配置正确：

flutter:
  assets:
    - assets/your_checkbox.svg

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