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

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

这段代码实现了以下