Flutter CupertinoButton child is not aligned properly

Question

Whenever I put a child into my CupertinoButton, it's aligned like this:

This is my code:

Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(left: 27, top: 27),
                        child: Align(
                            alignment: Alignment.topLeft,
                            child: SizedBox(
                              width: 60,
                              height: 60,
                              child: CupertinoButton(
                                color: Color(0xff383838),
                                onPressed: () {  },
                                child: Text("C", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),)
                              ),
                            )
                        ),
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("±", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),),
                            ),
                          )
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("%", style: TextStyle(fontSize: 21, color: Color(0xff78dbff)),),
                            ),
                          )
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 27, top: 27),
                          child: SizedBox(
                            width: 60,
                            height: 60,
                            child: CupertinoButton(
                              color: Color(0xff383838),
                              onPressed: () {  },
                              child: Text("÷", style: TextStyle(fontSize: 27, color: Color(0xffff6e6e))),
                            ),
                          )
                      )
                    ],
                  ),

I can provide the full file if its needed.

I want the text to be aligned in the center of the button, not next to it. Changing Text's textAlign to TextAlign.center does make it go slightly to the center, but still very far away. This problem doesn't occur in TextButton. This problem is not only with Text, after putting an icon as child, the problem is still the same. I tried using Padding to fix the problem but that did not help at all.

I'm using CupertinoPageScaffold as my scaffold. There are no modifications made to the parents of Row. I have no idea what is causing this problem.

user_13447414 · Answer

CupertinoButton has a default padding 16 for all sides. Hence, when you scaledown with SizedBox, the child still remain in its original position.

From cupertinobutton source code:

 const EdgeInsets _kButtonPadding = EdgeInsets.all(16.0);

Try the following by giving CupertinoButton a padding of zero:

Padding(
                padding: EdgeInsets.only(left: 27, top: 27),
                child: SizedBox(
                  width: 60,
                  height: 60,
                  child: CupertinoButton(
                    padding: EdgeInsets.all(0),
                    color: Color(0xff383838),
                    onPressed: () {},
                    child: Text(
                      "±",
                      style:
                          TextStyle(fontSize: 21, color: Color(0xff78dbff)),
                    ),
                  ),
                )),

Flutter CupertinoButton child is not aligned properly

1 Answers