ColorFilter being applied to whole app instead of just the SVG

[wilsonsilva]

My ColorFilter is being applied to the whole app, not just the container of the SVG. I tried wrapping the SVG in a Container and other widgets but it still applies the filter to the whole app. Is this expected?

Code:

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

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: SvgPicture.asset(
              'assets/svg/dart.svg', // from flutter_svg/example/assets/dart.svg
              colorFilter: const ColorFilter.mode(
                Color(0xFFFFC555),
                BlendMode.hardLight,
              ),
            ),
          ),
        ),
      )
    );
  }
}

FlutterSvg 2.0.7

Flutter 3.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 796c8ef792 (4 weeks ago) • 2023-06-13 15:51:02 -0700
Engine • revision 45f6e00911
Tools • Dart 3.0.5 • DevTools 2.23.1

[wilsonsilva]

This also happens in the example app.

[MrCsabaToth]

Could be related to #942 or #938? What happens if you try ColorFilter.mode(Colors.transparent, BlendMode.srcATop). If that works maybe you can cast the Color(0xFFFFC555) backdrop with a widget behind the SvgPicture. I was able to work around my problem while still staying with impeller that way.

[noinskit]

This bit me as well. As an extra data point, it only started after I upgraded from Flutter 3.10.x to Flutter 3.13.0. Using the ColorFiltered widget (wrapping SvgPicture) works around the issue for me.

[Mohdx]

try BlendMode.srcIn

  colorFilter: const ColorFilter.mode(
                MainColors.color2,
                BlendMode.srcIn,
              ),

[minhdanh]

Still happening to me. In my case I was trying to set the image to grayscale:

                                                  SvgPicture.asset(
                                                      'assets/images/svg/undraw_profile_pic_ic5t.svg',
                                                      semanticsLabel: 'Profile pic',
                                                      colorFilter: const ColorFilter.mode(
                                                        Colors.grey,
                                                        BlendMode.saturation,
                                                      ),
                                                    ),

[martin-braun]

I don't know if this is related, but for me all color filters, except for modulate would dye even the transparent parts of my SVG.