flutter - 追加ボタンを水平方向に中央揃えできるように、フラッターの下部ナビゲーションバーからラベルを削除するにはどうすればよいですか?

Question

誰かがこの問題を手伝ってくれますか。私が現在見つけた唯一の解決策は、showSelectedLabels と showUnselecedLabels の両方を false に設定することです。ただし、これによりすべてのラベルが削除されますが、追加ボタンのラベルのみを削除したいです。ラベルにプレースホルダー「」を使用すると、追加ボタンが水平方向に中央からずれます...

水平方向にボタンをオフにします

私が望む結果

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: tabs[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 10,
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        selectedIconTheme: IconThemeData(color: kPrimaryMagentaColor),
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w500),
        selectedItemColor: Colors.black,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.map,
                size: 26.5,
              ),
            ),
            label: 'Map',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.compass,
                size: 28,
              ),
            ),
            label: 'Discover',
          ),
          BottomNavigationBarItem(
            icon: Container(
              decoration: BoxDecoration(
                color: kPrimaryMagentaColor,
                shape: BoxShape.circle,
              ),
              padding: EdgeInsets.all(10),
              child: Icon(
                FeatherIcons.plus,
                color: Colors.white,
              ),
            ),
            label: "",
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(math.pi),
                child: Icon(
                  FeatherIcons.messageSquare,
                  size: 28,
                ),
              ),
            ),
            label: 'Inbox',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.calendar,
                size: 28,
              ),
            ),
            label: 'My Activity',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );

Answer 1

で2つのパラメータを使用する場合

showSelectedLabels: false, showUnselectedLabels: false,

とlabel != ""

この問題を取得できます。

Answer 2

わかりましたので、これはTextのを操作することでちょっと可能fontSizeです。

最初に、label各BottomNavigationBarItemto usetitleパラメータに使用したすべての を変更します。このような、

に変更label: 'Map'しtitle: Text('Map')ます。同様に、すべてのBottomNavigationBarItem. これは、labelパラメーターを使用して行うことができないためです。

さて、あなたのセンターBottomNavigationBarItemでは、このように使用します。

BottomNavigationBarItem(
  icon: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      decoration: BoxDecoration(color: Colors.deepPurple, shape: BoxShape.circle),
      padding: EdgeInsets.all(14),
      child: Icon(Icons.add, color: Colors.white),
    ),
  ),
  title: Text("", style: TextStyle(fontSize: 0)),
),

だから、あなたは2つのことを変えています。

1. ボタンを大きく見せるにはtoを増やしpaddingます。ContainerEdgeInsets.all(14)
2. fontSizeを使用して変更style: TextStyle(fontSize: 0)すると、ビューが非表示になります。

今、あなたはこのようなものを持っています。色を好きなように変更してください。