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
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',
),