Cant center my Widgets in Container using Column() flutter-CodePudding

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

CodePudding user response：

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,
                              size: 80,
                            ),
                            onPressed: () {
                              colorMars = active;
                              if (colorMars == active) {
                                colorVenus = inActive;
                              } else {
                                colorMars = inActive;
                              }

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

CodePudding user response：

thx man, I thought I will break my brain :D

Can you explain a little more - how I can find similar mistakes in future?) This example reminded me about one similar behavior in Container() and use his property "color", where if you use "decoration" in Container() - you must transplant "color" in "decoration" if earlier "color" was in Container().

Its similar example?)