如何減小 flutter 中底部導航欄的寬度

Question

我正在嘗試設計 ui 頁面，並且我成功地使用左右填充減少了底部導航欄購買的寬度。 但問題是，如果我減少底部導航欄的 with ，那么它會在第二張圖像中的導航欄的每個角落占據空間（黑色箭頭）。 下面我添加了代碼和兩個圖像，第一個圖像是來自 adobe xd 的圖像，我試圖實現這一點，第二個圖像是在嘗試減小底部導航欄的寬度之后。

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

垂直不需要的空間是因為Text()小部件。

請嘗試在每個BottomNavigationBarItem內更改它

替換您的 --> title: Text('')

有了這個 --> title: Container()

---

要減少或增加bottomNavigationBar的左右空間，請更改Padding()的值，例如

Padding(padding: const EdgeInsets.only(left: 10.0,right: 10.0),