CODEWITHSUNDEEP
flutter
user2570135
user2570135

Reputation: 2989

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

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

Upvotes: 4

Views: 16362

Answers (6)

yashwanth annavarapu7798
yashwanth annavarapu7798

Reputation: 1

use one of these properties inside bottom navigation bar

landscapeLayout: BottomNavigationBarLandscapeLayout.spread

landscapeLayout: BottomNavigationBarLandscapeLayout.centered

landscapeLayout: BottomNavigationBarLandscapeLayout.linear

Use "spread" property for your obstacle

Upvotes: 0

Koala
Koala

Reputation: 462

If u want a full flexibility you can create your own bottomNavigationBar This was my approach months ago

bottomNavigationBar: Container(
  color: primary,
  padding: EdgeInsets.all(20.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center, // Optional
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, // Change to your own spacing
    children: [
      Text("SHOPS"), //REPLACE WITH ICON
      Text("ORDERS"), //REPLACE WITH ICON
    ],
  ),
),

Upvotes: 0

Viroth
Viroth

Reputation: 692

Simple solution is in BottomNavigationBar use below properties:

 showSelectedLabels: false,
 showUnselectedLabels: true,

Upvotes: 1

Kevin Freistroffer
Kevin Freistroffer

Reputation: 131

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

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

Upvotes: 11

Son of Stackoverflow
Son of Stackoverflow

Reputation: 1669

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

Upvotes: 1

Robin
Robin

Reputation: 5427

One easy solution is - Wrap BottomNavigationBar widget with Column. And set mainAxisAlignment: MainAxisAlignment.center

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget> [
    BottomNavigationBar(...)
  ]
);

There must be have better way to do this, but i found this technique very helpful.

Upvotes: -1

Related Questions