如何在 Flutter 中更改 SVG 图像的颜色填充

问题描述 投票:0回答:2

大家好,需要您的帮助,我正在使用 svg_path_parser 库将 svg 图像加载到 flutter 中,但是我想在触摸时更改每个路径的颜色,现在我可以更改所有路径的颜色,但我需要知道选择哪条路径并更改该路径的颜色,有人可以帮助我或告诉我该怎么做..谢谢

我有这个(颤振标志)..


final paths = [
    ['m48.75 95.97-25.91-25.74 14.32-14.57 40.39 40.31z', Color(0xff02539a)],
    ['m22.52 70.25 25.68-25.68h28.87l-39.95 39.95z', Color(0xd745d1fd)],
    ['m.29 47.85 14.58 14.57 62.2-62.2h-29.02z', Color(0xff45d1fd)]
  ];

class _MyHomePageState extends State<MyHomePage> {
  Color colorSelect = Colors.teal;
  bool showBorder = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Transform.scale(
        scale: 2.0,
        child: GestureDetector(
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              child: Stack(
                children: widget.paths.map((e) {
                  return CustomPaint(
                      painter: MyPainter(
                          parseSvgPath(e[0] as String), colorSelect,
                          showPath: showBorder));
                }).toList(),
              ),
            ),
          ),
          behavior: HitTestBehavior.translucent,
          onTap: () {
            setState(() {
              // hide/show border
              showBorder = !showBorder;
              colorSelect = Colors.redAccent;

            });
          },
        ),
      ),
    );
  }
} 

class MyPainter extends CustomPainter {
  final Path path;
  final Color color;
  final bool showPath;
  MyPainter(this.path, this.color, {this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = color
      ..strokeWidth = 4.0;
    canvas.drawPath(path, paint);
    if (showPath) {
      var border = Paint()
        ..color = Colors.black
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(path, border);
    }
  }
flutter image dart svg fill
2个回答
0
投票
SvgPicture.asset("asset/icon_name.jpg",color: Colors.black),

这里使用 color 属性更改了我的 svg 填充颜色。


0
投票

由于

color
标签已贬值。要更改图标的颜色,请使用以下命令:

 SvgPicture.asset(
        'svg path',
        colorFilter:
            ColorFilter.mode(Colors.black, BlendMode.srcIn),
      ),
© www.soinside.com 2019 - 2024. All rights reserved.