Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter : align icon to the middle -- bottom navigation bar

Tags:

flutter

I have a bottom nav bar in my flutter app. How do I align the icon to the middle . Currently , it seems to be top align

Widget _bottomNavigationBar(int selectedIndex) {
    return BottomNavigationBar(
      backgroundColor: Palette.YELLOW,
      onTap: (int index) {
        setState(() {
          userModel.selectedIndex = index;
        });
      },
      currentIndex: userModel.selectedIndex,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Image.asset(
            "assets/images/search_nav_icon.png",

          ),
          title: Text(''),
        ),
        BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/fav_nav_icon.png",

            ),
      ],
    );
  }

enter image description here

like image 896
user2570135 Avatar asked Oct 11 '25 14:10

user2570135


2 Answers

This worked for me when Icons are used and no Text.

return BottomNavigationBar( showSelectedLabels: false, showUnselectedLabel: false, // ... );

like image 106
Kevin Freistroffer Avatar answered Oct 14 '25 12:10

Kevin Freistroffer


Wrap each Icon with a Container and set it's alignment property to Alignment.center.

Now wrap each Container with a Expanded widget and group them horizontally with the help of a Row Widget.

 Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget> [
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),),
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),),
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),)
  ]
)

You can increase/decrease the number of Expanded widgets as per your convenience, but make sure that you don't wrap any other single-child widget over Expanded widget

like image 44
Son of Stackoverflow Avatar answered Oct 14 '25 11:10

Son of Stackoverflow