How to align a text to center bottom of a IconButton widget?

byMR

December 20, 2021

I want to align a text to the center bottom of the IconButton but it’s not in the center instead it at the start.

Example of what i wanted : Image Here

The thing that it show: Image here

The Code

Column(
              children: [
                Row(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: [
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.library_add_check,
                          size: 22,
                        )),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.message,
                          size: 22,
                        )),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.thumb_up,
                          size: 22,
                        )),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.supervisor_account,
                          size: 22,
                        )),
                  ],
                ),
                Row(
                  mainAxisAlignment:
                      MainAxisAlignment
                          .spaceBetween,
                  children: [
                    Align(
                        alignment: Alignment.center,
                        child: Text(
                          "All",
                        )),
                  ],
                ),
                
              ],
            ),

I have tried everything i know but it still doesn’t work.
Thanks alot if you can help me with this issue.

>Solution :

Instead of creating another row for your IconButton() text wrap your IconButton() with Column() and add Text() to that Column().

You can do something like this.

Column(
          children: [
            Row(
              mainAxisAlignment:
                  MainAxisAlignment
                      .spaceEvenly,
              children: [
                Column(
                  children:[
                    IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.library_add_check,
                      size: 22,
                    )),
                    Text("abc"),
                  ],
                ),
                Column(
                  children:[
                    IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.thumb_up,
                      size: 22,
                    )),
                    Text("abc"),
                  ],
                ),
                Column(
                  children:[
                    IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.message,
                      size: 22,
                    )),
                    Text("abc"),
                  ],
                ),
                Column(
                  children:[
                    IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.supervisor_account,
                      size: 22,
                    )),
                    Text("ABC"),
                  ],
                ),
              ],
            ),
          ],
        );

You can try it here