Home > Software design >  How can I change Icon colors when it's selected in flutter?
How can I change Icon colors when it's selected in flutter?

Time:04-21

I'm new to flutter. I want to Icon colors be black except when they clicked. Either the color doesn't change when I click, or I can't change the color of the clicked one. I saw this ternary solution but I don't know why it isn't working.

class _RootAppState extends State<RootApp> {
  int _selectedIndex = 0;
  int? currentIndex;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text('Index 0: Home', style: optionStyle,),
    ...
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /*   appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ), */
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home, size: 25),
            label: 'Home',
          ),...
        ],
         currentIndex: _selectedIndex,
        selectedItemColor: _selectedIndex == currentIndex ? Colors.black :Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

CodePudding user response:

im pretty new to this too, looking from my app i just added this in try adding this in type: BottomNavigationBarType.fixed,

CodePudding user response:

Try using CupertinoTabScaffold. In state changes, the color of the tab you are in will light up momentarily. You can also change this color with Theme.

  • Related