Flutter add a black outline to top of BottomNavigationBar

Question

I am trying to figure out how to add a very subtle black line to the top of a BottomNavigationBar to make it's start more distinct from the rest of the content. AirBnb would be a good example of this.

Is there a way to achieve this with Flutter?

Below is the widget I am currently using to render the BottomNavigationBar and I have attached a sample below where there is a distinct grey line at the top of the navbar for 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)
        ),
      )
    ),
  );
}

The parent of this Widget:

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

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

Answer 1

How to add line on top of bottom navigation view in flutter ?

Code

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

Output

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

this code achieves the fallowing