如何用BlendMode.color修改Flutter渐变SVG颜色并保留透明背景

直接给你可行的代码方案，用ShaderMask替代直接给SvgPicture加colorFilter，既能保留透明背景，又能通过BlendMode.color修改渐变色调：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';

class TestScreen extends ConsumerWidget {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Center(
        child: ShaderMask(
          // 用蓝色作为着色器
          shaderCallback: (Rect bounds) => const SolidColor(Colors.blue).createShader(bounds),
          // 使用你需要的BlendMode.color
          blendMode: BlendMode.color,
          // 原SVG组件
          child: SvgPicture.asset('assets/business_card/Frame.svg'),
        ),
      ),
    );
  }
}

为什么原来的写法会出现多余背景？ #

直接给SvgPicture.asset设置colorFilter时，BlendMode.color会作用于整个图片的绘制画布——包括SVG的透明区域，所以透明部分会被混合出蓝色背景。

为什么这个方案能解决？ #

ShaderMask是基于子组件（也就是你的SVG）的Alpha通道来应用着色器的，只会在SVG有像素的区域（非透明部分）执行颜色混合，透明区域会完全保留，同时BlendMode.color能保留原SVG渐变的明暗层次，只把色调替换成蓝色，完美满足你的需求。

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