CODEWITHSUNDEEP
flutterdartsvg
Kaya Ryuuna
Kaya Ryuuna

Reputation: 764

Flutter - Changing SVG icon color

I have a Flutter app, which has a BottomNavigationBar, and its icons are made in svg. When selecting an icon from that bar, only the text changes color, the svg icons remain the same color.

bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: widget._colors.orange,
        unselectedItemColor: widget._colors.grey,
        items: _iconNavBar,
        currentIndex: _index,
        type: BottomNavigationBarType.fixed,
        onTap: onTap,
      ),

Example of how the BottomNavigationBarItem() is doing

BottomNavigationBarItem(
    icon: SvgPicture.asset(
      'svgs/home.svg',
    ),
    label: 'Home')

Upvotes: 39

Views: 59532

Answers (5)

Darexad
Darexad

Reputation: 668

Just try to use activeIcon: in bottomBarItem and there put your default icon with colorFilter. Example:

Edit as 2024 because color is now deprecated


BottomNavigationBarItem(
    label: 'label',
    icon: SvgPicture.asset(
        iconPath,
    ),
    activeIcon: SvgPicture.asset(
        iconPath,
        colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
    ),
),

old answer:

BottomNavigationBarItem(
    label: 'label',
    icon: SvgPicture.asset(
        iconPath,
    ),
    activeIcon: SvgPicture.asset(
        iconPath,
        color: Colors.blue,
    ),
),

Upvotes: 59

xemexpress
xemexpress

Reputation: 262

Try

ColorFilter.mode(color, BlendMode.srcIn)
ColorFilter.mode(color, BlendMode.modulate)
ColorFilter.mode(color, BlendMode.srcATop)

Answered by eli1stark

Upvotes: 1

pragmateek
pragmateek

Reputation: 936

Here is how I've made it work. There could be better ways than this.

BlocBuilder<NavbarBloc, NavbarState>(
      builder: (context, state) {
        return BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
              BlocProvider.of<NavbarBloc>(context).add(OnTap(index));
            },
            currentIndex: state.index,
            selectedItemColor: const Color(0xffFF7BC3),
            unselectedItemColor: const Color(0xffC0C0C0),
            showUnselectedLabels: true,
            selectedLabelStyle: GoogleFonts.montserrat(
              fontSize: 10.sp,
              fontWeight: FontWeight.w600,
              letterSpacing: -0.24,
            ),
            unselectedLabelStyle: GoogleFonts.montserrat(
              fontSize: 10.sp,
              fontWeight: FontWeight.w500,
              letterSpacing: -0.24,
            ),
            items: BlocProvider.of<NavbarBloc>(context)
                .navItems
                .asMap()
                .entries
                .map((e) => BottomNavigationBarItem(
                    icon: SvgPicture.asset(
                      e.value.$1,
                      colorFilter: ColorFilter.mode(
                        state.index == e.key
                            ? const Color(0xffFF7BC3)
                            : const Color(0xffc0c0c0),
                        BlendMode.srcIn,
                      ),
                    ),
                    label: e.value.$2))
                .toList(),
        );
      },
    );

There are some decorations I've omitted from the code above. This is how it looks: enter image description here

Upvotes: 2

M Karimi
M Karimi

Reputation: 3485

If you are using Impeller in your app, as Antialiasing does not seem to work with Impeller rendering you can wrap SvgPicture widget with Transform.scale(scale: 0.9999, child: child)

Transform.scale(
        scale: 0.99,
        child: SvgPicture.asset(
          'svg path',
          colorFilter:
              ColorFilter.mode(Colors.black, BlendMode.srcIn),
        ),
      ),

Refrences

Upvotes: 2

Sai Kiran Katayath
Sai Kiran Katayath

Reputation: 289

If you want to add color to an SVG image in your Flutter app using the flutter_svg package, you can achieve this effortlessly using the colorFilter property.

SvgPicture.asset(
'path to svg eg: assets/icons/svg/wrong_option.svg',
colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),   
);

Upvotes: 24

Related Questions