CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-bottomnavigation
Jun Dalisay
Jun Dalisay

Reputation: 1275

Flutter: How to remove the border of BottomNavigationBar?

I want to remove the line on the top of BottomNavigationBar so that the icons look part of the main screen.

But I can't find any ways to remove the border of bottomnavigationbar.

  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    backgroundColor: Colors.cyan[50],
    selectedItemColor: Colors.cyan[900],
    unselectedItemColor: Colors.grey[700],
    type: BottomNavigationBarType.fixed,
    items: [
      ..._tabItems.map((item) =>
          BottomNavigationBarItem(icon: item.icon, title: Text(item.title)))
    ],
  ),

How can I remove the line?

Upvotes: 1

Views: 4022

Answers (2)

Majid
Majid

Reputation: 1

i recommend you to use an IDE with autocomplete to see all options available!

you can add type of BottomNavigationBar with

type: BottomNavigationBarType.fixed,

because we want no animation we must use this, otherwise it is this type, by default:

type: BottomNavigationBarType.shifting,

see image, it's fixed. Flutter Project running in Chrome Web Browser. fixed BottomNavigationBar type

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69724

It's not a border its an elevation of BottomNavigationBar

Just add elevation: 0.0, in your BottomNavigationBar it will work

SAMPLE CODE

  bottomNavigationBar: BottomNavigationBar(
    selectedIconTheme: IconThemeData(color: Colors.orange),
    unselectedIconTheme: IconThemeData(color: Colors.grey),
    elevation: 0.0,
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Business'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('Appointment'),
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

Upvotes: 11

Related Questions