Блог

Главная - Вопросы по программированию - Как изменить значок SVG в нижней панели навигации в Flutter?

Как изменить значок SVG в нижней панели навигации в Flutter?

#flutter #icons #flutter-layout #flutter-dependencies

#flutter #Значки #flutter-layout #flutter-зависимости

Вопрос:

Я пытаюсь изменить цвет значка SVG при нажатии. Я пробовал selectedColor , но значок не изменил цвет. Итак, я пытаюсь использовать ярлык if … else, но мне все еще не удалось изменить цвет.

Вот этот код:

 bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/dashboard-outline.svg', width: 25),
              label: 'Dashboard'
          ),
          BottomNavigationBarItem(
            icon: SvgPicture.asset('assets/tank-outline.svg', color: Colors.black54, width: 30),
            label: 'Tanks',
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/activity-outline.svg', width: 18),
              label: 'Activity'
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/account-outline.svg', width: 20),
              label: 'Account'
          ),
        ],
        currentIndex: _index,
        onTap: _onItemTapped,
        selectedItemColor: Color.fromRGBO(0,99,183,1)
      ),

У меня есть другой файл для значка изображения SVG, чтобы изменить его при нажатии.

Вот код, который я пробовал:

 bool onSelected = true;

  Widget build(BuildContext context) {
    return Scaffold(
      body: _myPages[_index],

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset(onSelected == false ? 'assets/dashboard-outline.svg' : 'assets/dashboard-fill.svg', width: 25),
              label: 'Dashboard'
          ),

Любая помощь будет оценена.

Комментарии:

1. Попробуйте установить цвет для значка непосредственно с помощью SvgPicture.asset(image, color: isSelected ? selectedIconColor : defaultIconColor) ;

2. icon: onSelected == false ? SvgPicture.asset('assets/dashboard-outline.svg', width: 25) : SvgPicture.asset('assets/dashboard-fill.svg', width: 25) попробуйте с этим

3. @ShubhamNarkhede Я пробовал это, но это не сработало

Ответ №1:

Вы можете просто изменить свои элементы, подтвердив это свойство, чтобы определить правильный цвет:

  SvgPicture.asset(
 'assets/dashboard-outline.svg', 
  width: 25), 
  color: _currentIndex == 0 ? Colors.red : Colors.black,
Метки: