flutterdartflutter-layoutnavbar

How to remove or increase selected decoration in NavigationBar


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


Solution

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