Flutter - How add separators fot BottomNavigationBar? - flutter

Question

I use BottomNavigationBar in my flutter app. This is exist view:
but I need to add separators between items. like this:
Is it possible? is there a simple way to implement this?

Answer 1

It's possible using BottomAppBar by having Container as a child to specify custom height of the appbar and then it can have Row to add children. The Row can have 3 FlatButtons, each having an Icon and Text inside a Column. Between each FlatButton, you can add Container to add divider. Below is code snippet:
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.home),
Text('Home')
],
),
),
Container(color: Colors.black, width: 2,),
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.business),
Text('Business')
],
),
),
Container(color: Colors.black, width: 2,),
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.school),
Text('School')
],
),
)
]
),
)
),
And the output :