CODEWITHSUNDEEP
dartflutter
Emmanuel Okocha
Emmanuel Okocha

Reputation: 397

how do i increase the height of bottomAppbar in flutter

I have a BottomAppBar in my app but the height seems to just wrap around the icons in it. I want to give the bottomappbar some more height how do i accomplish this please 

   bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
                Icon(Icons.category),
                Icon(Icons.account_circle),
                Icon(Icons.message),
                Icon(Icons.access_alarm)
            ],
          ),
    elevation: 9.0,
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),

Upvotes: 2

Views: 10978

Answers (5)

Saad Akram
Saad Akram

Reputation: 1

Now you can simply controll the height of bottomAppBar and use a sizedbox for center space.

bottomNavigationBar: BottomAppBar(
  height: 50,
  padding: const EdgeInsets.only(bottom: 10),
  shape: const CircularNotchedRectangle(),
  color: CColors.bottomAppBarcolor,
  notchMargin: 6,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Icon(Icons.category),
      Icon(Icons.account_circle),
      const SizedBox(width: 40),
      Icon(Icons.message),
      Icon(Icons.access_alarm),
    ],
  ),
),

Upvotes: 0

thambaru
thambaru

Reputation: 11

SizedBox worked for me.

 bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

                Icon(Icons.category, color: HexColor('#00A591'),),
                Icon(Icons.account_circle,color: HexColor('#00A591'),),
                const SizedBox(height: 55.0, width: 1.0),
                Icon(Icons.message, color: HexColor('#00A591'),),
                Icon(Icons.access_alarm, color: HexColor('#00A591'),),

            ],
          ),
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),

`

Upvotes: 0

cipli onat
cipli onat

Reputation: 2142

You can add padding to icons: 

BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.category),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.account_circle),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.message),
            ),
            Padding(
              padding: const EdgeInsets.all(15.0),
              child: Icon(Icons.access_alarm),
            )
          ],
        ),
        elevation: 9.0,
        shape: CircularNotchedRectangle(),
        color: Colors.white,
        notchMargin: 8.0,
      )

Another solution: Im using BottomNavigatorBar and its has a property iconSize

BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        iconSize: 35,


        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.explore), title: Text('Explore')),
          BottomNavigationBarItem(
              icon: Icon(Icons.card_travel), title: Text('Adventure')),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text('Search')),
          BottomNavigationBarItem(
              icon: Icon(Icons.collections_bookmark), title: Text('Bookmarks')),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.deepPurple,
        onTap: _onItemTapped,
      )

Upvotes: 3

Emmanuel Okocha
Emmanuel Okocha

Reputation: 397

i solved this by just adding a container widget in the middle of the icons in the row. To me there should be a better way though if anyone can suggest that will be nice below is how i solved it

  bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

                Icon(Icons.category, color: HexColor('#00A591'),),
                Icon(Icons.account_circle,color: HexColor('#00A591'),),
                Container(height: 55.0,width: 1.0,),
                Icon(Icons.message, color: HexColor('#00A591'),),
                Icon(Icons.access_alarm, color: HexColor('#00A591'),),

            ],
          ),
    shape: CircularNotchedRectangle(),
    color: Colors.white,
    notchMargin: 8.0,
  ),

Upvotes: 2

Pasan Randula Eramusugoda
Pasan Randula Eramusugoda

Reputation: 1679

Actually you can try wrapping Row widget with Container by specifying the height.

bottomNavigationBar: BottomAppBar(
  child: Container(
    height: 100.0,
    color: Colors.yellow,
    child: YourRowWidget(),
  ),
),

Upvotes: 0

Related Questions