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.

CodePudding user response：

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