Flutter - SelectedItemColor in bottomNavigationBar not working

user_13085798 0
Viewed 751

I need to display a BottomNavigationBar with the same width in each item and a yelowish color in the selected but the property seems that's not working

Here's the code 

bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      showUnselectedLabels: true,
      selectedItemColor: Color(0xffffd156),
      backgroundColor: Color(0xff22273d).withOpacity(1),
      currentIndex: _currentIndex,
      onTap: (int index) {
        _currentIndex = index;
        setState(() {
          _currentIndex = index;
        });
        print(_currentIndex);
        if(porraIsActive=="Active" && userPorra && _currentIndex ==1){
          Navigator.pushNamed(context, '/vistaPorra');
          _currentIndex = 0;
        }
      },
      items: getBottomBar()
  )

And Each Item is stored in a List 

    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/home_24_px.svg",
        ),
        title: Text("Inicio", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),
        ),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/soccer_24_px.svg",),
        title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
  backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/calendar_24_px.svg",),
        title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),

      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/classification_24_px.svg",),
        title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/more_horiz_24_px.svg",),
        title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
  ];
flutter-layout dart flutter
3 Answers

You should placed the bottom navigation items as an array of BottomNavigationBarItem

     bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),

Here is the complete code for three bottom navigation bar from Flutter website.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      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),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}
user_10545820

Seems like it will help you,

 getBottomBar(){
    List items = <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Business'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('School'),
      ),
    ];

    return items;
  }
user_183603210

Here i am changing the color to green. Just try it

    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'First',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.exit_to_app),
        label: 'Second',
      ),
    ],
    
    selectedItemColor: Colors.green,
  )
user_175537810
Related