How to remove or increase selected decoration in NavigationBar-CodePudding

How can I remove or increase the decoration of the selected item in the NavigationBar in flutter?

NavigationBar(
        elevation: 0,
        selectedIndex: navIndex,
        onDestinationSelected: (index) => setState(() {
          navIndex = index;
        }),
        backgroundColor: Colors.transparent,
        labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
        destinations: const [
          NavigationDestination(
            icon: Text('Your subscriptions'),
            label: '',
          ),
          NavigationDestination(
            icon: Text('Upcoming bills'),
            label: '',
          ),
        ],
      ),

image of decoration

CodePudding user response：

Typically, the NavigationDestination icon has to be an Icon() widget. But in your case, it's text. That's why the text exceeds the highlighted area.

NavigationDestination(
        icon: <This has to be a Icon>
        label: '',
),

Icon will use 'NavigationBarThemeData.iconTheme' , if 'NavigationBarThemeData' not present , icon will use 'IconThemeData'. In both cases, I couldn't find a way to change the size of the highlighted area.

You could do something like this, it will do the job but not that smooth.

  int _selectedIndex = 0; // local variable



      NavigationDestination(
        icon: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                color: _selectedIndex == 0 ? Colors.blue.shade100 : Colors.transparent,
                shape: BoxShape.rectangle),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Your subscriptions'),
            )),
        label: 'Your subscriptions',
      ),

CodePudding user response：

If you are using BottomNavigationBar,this can be used to change the color,textstyle and font size of the contents in navigation bar.

BottomNavigationBar(
selectedItemColor: Colors.white
selectedLabelStyle: const TextStyle(color: Colors.white),
selectedFontSize: 12,
ontap:(){...}
)