Не могу центрировать мои виджеты в контейнере, используя флаттер Column()

Question

На этом фото мой шаг 1

И когда я использую Column(), мой дизайн не является центром :( Смотрите -> шаг 2

также я не могу нажать на него, когда я обернул Column(), и я не вижу ошибок:

       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 Для иконок использую этот пакет font_awesome_flutter в pubspec.yaml:

      dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.1.0

Полный код здесь -> full_code

Answer 1

Добавлять iconSize: 80в твоей . И полный код будет

       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(() {});
                            }),
                      ],
                    ),
                  ),
                ),
              ),

На основе документации

При создании кнопки со значком со значком не переопределяйте размер значка параметром Icon.size, вместо этого используйте параметр iconSize кнопки значка. Например, сделайте это:

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

Избегайте этого:

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

Если вы это сделаете, размер кнопки будет основан на размере значка по умолчанию, а не на 72, что может привести к неожиданным макетам и проблемам с обрезкой.

Если вы замените размер 80 без добавления размера, FaIconбудет больше, чем его родитель ( IconButton) и вы получите неожиданный макет.