How to Change the Spacing between Items in the `BottomNavigationBar()` in Flutter?

user_4756173 0
Viewed 2581

1. What I wish I could do

So far, my BottomNavigationBar looks ok (and simple), but, given that I have only 2 items in it, I would like to bring them a little bit closer together (and maybe to the right), so they are more easily reached. How do I do that? Is there a property that does the job? Maybe inside the BottomNavigationBar theme?

2. A Snippet

Here is what it looks like right now:

bottomNavigationBar: BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.account_circle),
      title: Text('Personal Data'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.payment),
      title: Text('Contracts'),
    ),
  ],
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.orange,
  onTap: _onItemTapped,
),
bottomnavigationview dart flutter
2 Answers

Upon inspecting the source code of BottomNavigationBar it looks like this isn't easily implemented due to this line here:

Widget _createContainer(List<Widget> tiles) {
  return DefaultTextStyle.merge(
    overflow: TextOverflow.ellipsis,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: tiles,
    ),
  );
}

It's in a private function within the class. Meaning that in order to change the mainAxisAlignment property of the Row that contains the tiles you'd have to recreate the entire class.

user_99107190 
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            canvasColor: Color.fromRGBO(255, 255, 255, 0),
              primaryColor: Colors.red,
                textTheme: Theme.of(context).textTheme.copyWith(
                    caption: TextStyle(
                        color: Colors
                            .white))), 
            child: Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 40),
                   child: BottomNavigationBar(
                      showSelectedLabels: false,
                      showUnselectedLabels: false,
                      type: BottomNavigationBarType.fixed,
                      currentIndex: 0,
                      items: [
                        BottomNavigationBarItem(
                          icon: Icon(Icons.home),
                          title: Text(''),
                        ),
                        BottomNavigationBarItem(
                          icon: Icon(Icons.search),
                          title: Text(''),
                        ),
                        BottomNavigationBarItem(
                          icon: Icon(Icons.favorite_border),
                          title: Text(''),
                        ),
                        BottomNavigationBarItem(
                          icon: Icon(
                            Icons.folder_open,
                          ),
                          title: Text(''),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            );

enter image description here

user_139540220
Related