Question 175158 in Flutter Question posted in
The official Flutter documentation can be found here.

What is the meaning of life?

I have the following code in my widget build method:

return CustomStyle(
        body: Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: SizedBox(
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Image(
                  height: screenWidth * 0.1,
                  width: screenWidth * 0.1,
                  image: const Svg("lib/assets/images/icons/home.svg")),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: ImageIcon(
                  const AssetImage("lib/assets/images/learnIcon.png"),
                  size: screenWidth * 0.1),
              label: 'Learn',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: const Color(0xFFF24949),
          onTap: _onItemTapped,
          unselectedItemColor: Colors.white,
          selectedLabelStyle: TextStyle(
            color: const Color(0xFFF24949),
          ),
          unselectedLabelStyle: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ));

selectedItemColor is working correctly for the 2nd BottomNavigationBarItem in which I am rendering icon using AssetImage with a png. However, it does not work for the 1st one where I am using svg. Screenshots of both below. in which one, i expected the home label and icon to be orange.

AssetImage

In the 2nd one, they are correctly both orange.

enter image description here

I have tried using both flutter_svg_provider as well as flutter_svg packages, same issue in both.

Kindly help someone!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This worked for me. selectedItemColor and selectedLabelStyle have not effect on the SVGs.

    BottomNavigationBarItem(
                  icon: Image(
                      height: screenWidth * 0.1,
                      width: screenWidth * 0.1,
                      color: _selectedIndex == 0
                          ? Theme.of(context).colorScheme.primary
                          : Colors.white,
                      image: const Svg("lib/assets/images/icons/home.svg")),
                  label: 'Home',
                ),

  2. 0

    selectedItemColor of the bottomNavigationBar does not affect Svg.
    I use package flutter_svg

    Here is a workaround:

    1. I create a class called IconModel which holds icon as asset and its label
    class IconModel {
  String icon;
  String label;

  IconModel({required this.icon, required this.label });

}
    1. I create a function to render the bottomNavigationBar items
    List<BottomNavigationBarItem> getNavigationBarItems() {
    List<IconModel> listIconModel = [
      IconModel(icon: AssetConstant.IMG_APP_LOGO_SVG, label: 'Home'),
      IconModel(icon: AssetConstant.IMG_APP_LOGO_SVG, label: 'Learn'),
    ];

    return listIconModel.asMap().map((index, iconModel) {
      return MapEntry(
        index, 
        /// 
        /// The trick is right here
        /// When the index of the item is equal to _selectedIndex, I set the 
        /// color to const Color(0xFFF24949)
        ///
        /// You may play around with colorBlendMode attribute to see all the 
        /// possible outcome
        ///
        BottomNavigationBarItem(
          icon: SvgPicture.asset(iconModel.icon, width: 100, color: index == _selectedIndex ? const Color(0xFFF24949) : null, colorBlendMode: BlendMode.modulate),
          label: iconModel.label
        ),
      );
    }).values.toList();

  }
    1. Finally, put it together
    bottomNavigationBar: SizedBox(
    child: BottomNavigationBar(
        items: getNavigationBarItems(),
        currentIndex: _selectedIndex,
        onTap: (index) {
         setState(() {
             _selectedIndex = index;
           });
         },
        selectedItemColor: const Color(0xFFF24949),
        unselectedItemColor: Colors.black,
        selectedLabelStyle: const TextStyle(
          color: Color(0xFFF24949),
        ),
        unselectedLabelStyle: const TextStyle(
          color: Colors.black,
        ),
    ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search