Flutter：如何去除BottomNavigationBar的边框？答案

【问题标题】：Flutter: How to remove the border of BottomNavigationBar?Flutter：如何去除BottomNavigationBar的边框？
【发布时间】：2021-01-09 13:23:48
【问题描述】：

我想删除 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)))
    ],
  ),

如何删除线？

【问题讨论】：

标签： flutter dart flutter-layout flutter-bottomnavigation

【解决方案1】：

这不是边界，它是 elevation 的 BottomNavigationBar

只需在您的BottomNavigationBar 中添加elevation: 0.0, 即可使用

示例代码

  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,
  ),

【讨论】：

【解决方案2】：

我建议您使用具有自动完成功能的 IDE 来查看所有可用选项！

你可以添加底部导航栏的类型

type: BottomNavigationBarType.fixed,

因为我们不想要动画所以必须使用这个，否则默认就是这个类型：

type: BottomNavigationBarType.shifting,

看图片，它是固定的。 Flutter Project running in Chrome Web Browser. fixed BottomNavigationBar type

【讨论】：