Add a divider on top of a bottom navigation bar?

user_15335912 0
Viewed 518

Is there a way to add a divider like this one to the top of a BottomNavigationBar()? I got it for the AppBar() as you can see below:

AppBar() with Divider()

appBar: AppBar(
        elevation: 0,
        title: Text(
          _views[_index]['title'],
        ),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(10),
          child: Divider(
            thickness: 2,
            height: 0,
          ),
        ),
      ),

But I wonder if there is a way to do the same with the BottomNavigationBar().

It should look like this in the end:

BottomNavigationBar()

dart flutter user-interface
2 Answers

AppBar has the leading property

Use a colored container inside a PreferredSize widget for the AppBar widget's top

AppBar(
  title: Text("Title"),
  leading: PreferredSize(
    child: Container(color: colors.Black, height: 5.0),
    preferredSize: Size.fromHeight(5.0),
  ),
),
user_153327520

I just solved it like this:

body: Column(
        children: [
          _views[_index]['view'],
          Spacer(),
          Divider(
            thickness: 2,
          ),
        ],
      ),

I just added a Divider() inside the body property under the actual content of the Scaffold() and pushed it down with a Spacer().

user_153359120
Related