Search code examples
androidiosflutterdartflutter-layout

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


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:

enter image description here

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


Solution

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

    enter image description here