BottomNavigationBar without highlighted items Flutter-CodePudding

I'm going to have about 7 states for my screen and want to navigate them in specific order using BottomNavigationBar with two items, of which first goes "back" and second one forth. Problem is, there's a default index for BottomNavigationBar, which is 0, and the first option is always higlighted. Is there a way to make it no highlighted, or maybe another widget that looks like BottomNavigationBar, that fits better with what I'm trying to do? I use BottomNavigationBar in my app already for other screen, and would like to maintain the similar look.

CodePudding user response：

currentIndex default value is 0, You can use Row widget for bottom navbar and SingleChildScrollView for scrolling effect.

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> 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,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: Expanded(child: _widgetOptions.elementAt(_selectedIndex)),
      ),
      bottomNavigationBar: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          for (int i = 0; i < 3; i  )
            IconButton(
                onPressed: () {
                  setState(() {
                    _selectedIndex = i;
                  });
                },
                icon: Icon(Icons.ac_unit))
        ],
      ),
    );
  }
}

You can also use it with Pageview.

CodePudding user response：

There are 3 properties in BottomNavigationBar you could set to achieve what you want: selectedIconTheme (to set selected icon style), selectedFontSize (to set selected label font size) and selectedItemColor (to set selected label color).

There you will find an example on this link:

https://zapp.run/edit/flutter-zo406s1o506?lazy=false&split=50&entry=lib/main.dart&file=lib/main.dart