Flutter 在 BottomNavigationBar 顶部添加黑色轮廓

Question

我试图弄清楚如何在 BottomNavigationBar 的顶部添加一条非常微妙的黑线，以使其开始与其余内容更加不同。 AirBnb 就是一个很好的例子。

有没有办法用 Flutter 实现这一点？

下面是我目前用来渲染 BottomNavigationBar 的小部件，我在下方附加了一个示例，其中 AirBnb 的导航栏顶部有一条明显的灰线。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: currentPage,
    bottomNavigationBar: PreferredSize(
      preferredSize: Size.fromHeight(50),
      child: Container (
        decoration: BoxDecoration(
        border: Border.all(color: Colors.black)
        ),
      )
    ),
  );
}

此 Widget 的父级：

void main() => runApp(MaterialApp(
  home: new MyApp(),
  debugShowCheckedModeBanner: true,
));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navbar();
  }
}

Answer 1

如何在颤动的底部导航视图顶部添加线条？

代码

class BottomNavigationBarHandler {
  Widget bar(int currentIndex) {
    return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(top: BorderSide(color: Colors.white, width: 3.0))),
        child: BottomNavigationBar(
            backgroundColor: Colors.black,
            selectedItemColor: Colors.pinkAccent,
            unselectedItemColor: Colors.white,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            onTap: onTabTapped,
            currentIndex: currentIndex,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home_outlined),
                title: Text('Home')),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                title: Text('Messages')),
              BottomNavigationBarItem(
                icon: Icon(Icons.add), 
                title: Text('Profile'))]));
  }

  void onTabTapped(int index) {
     print('BottomNavigationBarIndex ::' + index.toString());
  }
}

输出

Answer 2

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(200),
        child: Container(
          alignment: Alignment.center,
          color: globals.white,
          height: 100,
          child: Text('imyadunandan'),
        ),
      ),
      body: Container(
        color: globals.white,
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: globals.white,
          boxShadow: [
            BoxShadow(
              color: globals.black,
            ),
          ],
        ),
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.android),
              title: Text('Android'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.desktop_windows),
              title: Text('Windows'),
            ),
          ],
          backgroundColor: globals.white,
          elevation: 0,
        ),
      ),
    );
  }

这段代码实现了休闲