dart 如何改变flutter渐变png/svg颜色与blendmode.color但保持背景透明

lf5gs5x2  于 2023-10-13  发布在  Flutter
关注(0)|答案(1)|浏览(133)

我正在做一个Flutter项目,在这个项目中我使用SvgPicture.asset小部件来显示SVG图像。我想将SVG图像的颜色从红色渐变更改为蓝色渐变,但我遇到了背景色问题。
我试过使用BlendMode.srcIn,它允许我改变透明背景的颜色,但它会导致纯色,而不是渐变。理想情况下,我希望使用BlendMode.color,但当我这样做时,它引入了一个不需要的背景色。

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: SvgPicture.asset(
          'assets/business_card/Frame.svg',
          colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.color),
        ),
      ),
    );
  }
}```

[![What i'm try to achieve][1]][1]

  [1]: https://i.stack.imgur.com/8Ht4Q.jpg
vsdwdz23

vsdwdz231#

您可以使用此扩展代码向小部件添加渐变:

extension Extension on Widget {
     gradient({required Gradient gradient }) => ShaderMask(
        blendMode: BlendMode.srcIn,
        shaderCallback: (bouenter code herends) => gradient.createShader(
          Rect.fromLTWH(0, 0, bounds.width, bounds.height),
        ),
        child: this,
      );
    }

相关问题