无法使用column（）颤动将我的小部件置于容器中

Question

在这张照片上是我的 step1

，当我使用column（）时，我的设计不是中心:(观看它- ＆gt

;请参阅任何错误：

 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_awsome_flutter 在pubspec.yaml中：

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.1.0

这里有完整的代码 - ＆gt; full_code

Answer 1

添加IconSize：80在您的iconbutton中。完整的代码将

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

基于iconbutton

用图标创建图标按钮时，请勿覆盖图标的
尺寸与其图标。大小参数，使用图标按钮的Iconsize
代替参数。例如，这样做：

iconbutton（Iconsize：72，ICON：ICON（ICON.FARAITE），...）

避免这样做：

iconbutton（图标：ICON（ICON.FARAITE，size：72），...）

如果这样做，按钮的大小将基于默认图标大小，
不是72，可能会产生意外的布局和剪辑问题。

如果您覆盖faicon带有80的尺寸，而无需添加iconbutton大小，则faicon将大于其父（iconbutton） ）您会得到意外的布局。