how to reduce the width of bottomnavigationbar in flutter - flutter

Question

I am trying to design the ui page and i successfully reduces the width of bottomnavigationbar buy using padding on left and right. But the problem is if i reduces the with of bottomnavigationbar then it is take space at each corner of navigationbar which is in second image (black arrow). Below i have added the code and two images,the first image is the image from adobe xd which i trying to achieve this and second image is after trying to reduce the width of bottomnavigationbar.
class _SettingsState extends State<Settings> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.yellow,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 65.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "اسمك (اسم صفحتك)",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "التصنيف",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.text,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
isDense: true,
hintText: "حساب تويتر",
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
keyboardType: TextInputType.number,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "حساب انستقرام",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "موقع الكتروني",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8.0, right: 8.0, top: 5.0),
child: TextField(
decoration: new InputDecoration(
hintText: "وصف",
isDense: true,
fillColor: Colors.black,
suffixIcon: Container(
margin: EdgeInsets.only(bottom: 23),
width: 0.1,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text('تعديل', style: TextStyle(color: Colors.white),),
),
),
obscureText: true,
keyboardType: TextInputType.visiblePassword,
style: new TextStyle(color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 25.0,left: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'مشاركة صفحتي',
style: TextStyle(
color: Colors.redAccent, fontSize: 18.0,
decoration: TextDecoration.underline,),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: MaterialButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0),
),
minWidth: 280.0,
height: 47.0,
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home1()));
},
textColor: Colors.white,
color: Colors.redAccent,
child: Text(
'تسجيل خروج ',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25.0),
),
),
),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 50.0,right: 50.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40)))),
child: BottomNavigationBar(
backgroundColor: Colors.grey[200],
currentIndex: 3,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.search,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.star_border,color: Colors.grey,size: 35.0,),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline,color: Colors.redAccent,size: 35.0,),
title: Text(''),
),
],
),
),
),
);
}

Answer 1

The vertical unwanted space is because the Text() widget.
Please try changing this, inside each BottomNavigationBarItem
Replace your --> title: Text('')
With this --> title: Container()
To reduce or increase the left and right space in the bottomNavigationBar, change the values of Padding() like
Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),