How to make a text right below an icon in BottomAppBar in flutter?-CodePudding

So I have a BottomAppBar and i'm trying to have a text right below the icon button, I have tried using Column with mainaxissize set to min and I have also tried to use wrap with the lowest spacing i can do but none of these methods put the text right below the icon, there seems to be some type of gap or padding between the icon and the text that I would like to remove, how can i make the text right below the Icon?

here is the code:

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)),
      ],
    ),
  ),

This is what it is currently showing:

and I would like to have the text right underneath the icon

CodePudding user response：

Change the IconButton widget as follows

 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")
                ]),

CodePudding user response：

The iconbutton has a default padding. You cab use an icon and wrap it with inkwell or gesture detector like shown below

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