如何在顫動的BottomAppBar中的圖標正下方制作文本？

Question

所以我有一個 BottomAppBar 並且我試圖在圖標按鈕下方有一個文本，我嘗試使用 Column 將 mainaxissize 設置為 min 並且我也嘗試使用我可以做的最小間距的 wrap 但這些方法都沒有將文本放在圖標正下方，圖標和我要刪除的文本之間似乎存在某種類型的間隙或填充，我怎樣才能使圖標正下方的文本？

這是代碼：

bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 4.0,
    child: new Row(
      // mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Wrap(
          direction: Axis.vertical,
            children: [
          IconButton(
              icon: Icon(
                Icons.home_outlined,
                color: Colors.grey,
              ),
              onPressed: () => screenIndex(0)),
          Text("Home")
        ]),
        IconButton(
            icon: Icon(
              Icons.history,
              color: Colors.grey,
            ),
            onPressed: () => screenIndex(1)),
        SizedBox(width: 10),
        IconButton(
            icon: Icon(
              Icons.message,
              color: Colors.grey,
            ),
            onPressed: () => screenIndex(3)),
        IconButton(
            icon: Icon(
              Icons.person_outline,
              color: Colors.grey,
            ),
            onPressed: () => screenIndex(4)),
      ],
    ),
  ),

這是它目前顯示的內容：

我想把文字放在圖標下面

Answer 1

iconbutton 有一個默認的填充。 您可以使用圖標並用墨水瓶或手勢檢測器將其包裹起來，如下所示

InkWell(
onTap: () => screenIndex(0),
Column(
 mainAxisSize: MainAxisSize.min,
  children:[
     Icon(Icons.home_outlined, color: Colors.grey),
     Text("Home")
  ]
 )
)

Answer 2

更改 IconButton 小部件如下

 Wrap(
              crossAxisAlignment: WrapCrossAlignment.center,
                direction: Axis.vertical,
                children: [
                  IconButton(
                      icon: Icon(
                        Icons.home_outlined,
                        color: Colors.grey,
                      ),
                      padding: EdgeInsets.zero,
                      constraints: BoxConstraints(),
                      onPressed: () => screenIndex(0)),
                  Text("Home")
                ]),