Cant center my Widgets in Container using Column() flutter

Question

On this pic is my step1

And when I use Column(), my design isn't a center :( Watch it -> step2

also I cant press on it when I wrapped in Column() and I dont see any mistakes:

 Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: colorMars,
                    ),
                    height: 200,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        IconButton(
                            icon: const FaIcon(
                              FontAwesomeIcons.mars,
                              size: 80,
                            ),
                            onPressed: () {
                              colorMars = active;
                              if (colorMars == active) {
                                colorVenus = inActive;
                              } else {
                                colorMars = inActive;
                              }

                              setState(() {});
                            }),
                      ],
                    ),
                  ),
                ),
              ),

PS For icons I use this package font_awesome_flutter In pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.1.0

Full of code here -> full_code

Answer 1

Add iconSize: 80 in your IconButton. And full code will be

 Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: colorMars,
                    ),
                    height: 200,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        IconButton(
                            iconSize: 80,
                            icon: const FaIcon(
                              FontAwesomeIcons.mars,
                            ),
                            onPressed: () {
                              colorMars = active;
                              if (colorMars == active) {
                                colorVenus = inActive;
                              } else {
                                colorMars = inActive;
                              }

                              setState(() {});
                            }),
                      ],
                    ),
                  ),
                ),
              ),

Based on the IconButton documentation

When creating an icon button with an Icon, do not override the icon's size with its Icon.size parameter, use the icon button's iconSize parameter instead. For example do this:

IconButton(iconSize: 72, icon: Icon(Icons.favorite), ...)

Avoid doing this:

IconButton(icon: Icon(Icons.favorite, size: 72), ...)

If you do, the button's size will be based on the default icon size, not 72, which may produce unexpected layouts and clipping issues.

If you override FaIcon with size 80 without adding IconButton size, the FaIcon will be bigger than its parent (IconButton) and you get unexpected layout.