如何减小 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),