BorderSide Color to BottomNavigationBar? - flutter

Question

I want to add a colored BorderSide to the top of my BottomNavigationBar.
I can achieve it using a Custom BottomAppBar, but it is not convenient for my design as it misplaces my floatingActionButtonLocation.centerDocked, so I need to stick with BottomNavigationBar.
Any help to find a workaround is appreciated.
import 'package:flutter/material.dart';
class BottomNavTest extends StatefulWidget {
#override
_BottomNavTestState createState() => _BottomNavTestState();
}
class _BottomNavTestState extends State<BottomNavTest> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black, //
currentIndex: 0,
onTap: (index) {
switch (index) {
case 0:
break;
case 1:
break;
}
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('good'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_down),
title: Text('bad'),
),
],
),
);
}
}
Current output:
My goal:

Answer 1

Add it inside the container and give border
Scaffold(
backgroundColor: Colors.grey,
bottomNavigationBar: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2)
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black,
currentIndex: 0,
onTap: (index) {
switch (index) {
case 0:
break;
case 1:
break;
}
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('good'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_down),
title: Text('bad'),
),
],
),
),
);
Output:

Answer 2

You can make BottomNavigationBar as a child to the Container..
And add topBorder to Container like this..
decoration: BoxDecoration( border: Border( top: BorderSide( color: Colors.blue, // width: 3.0 --> you can set a custom width too! ), ), ),
hope it solves your issue