如何在 Flutter 中调整图标/图标按钮的大小？答案

【问题标题】：How to resizing an Icon / Icon Button in Flutter?如何在 Flutter 中调整图标/图标按钮的大小？
【发布时间】：2019-08-29 11:47:21
【问题描述】：

我有 2 个问题。

如何缩放我们的图标？我的意思不是 Flutter 的默认图标。但是当您更改为图像时。我有一个带有如下图像的图标按钮：

Row(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          IconButton(
                            icon: new Image.asset("images/IG.png"),
                          ),
                          IconButton(
                            icon: new Image.asset("images/Twitter.png"),
                          ),
                          IconButton(
                            icon: new Image.asset("images/Fb.png"),
                          ),
                        ],
                      )

它只有 3 个图标。当我添加更多图标时，它会将布局分解为黄黑色的砖块。如何让它们变小？

上面的问题是针对 IconButton 的。如何用图像更改图标？这是代码：

Icon(Icons.star, color: Colors.red)

如何使用 Image.asset 更改“star”？没有任何对其他链接的引用，仅显示图标。

【问题讨论】：

标签： android flutter icons flutter-layout

【解决方案1】：

您可以将size 属性用于Icon。

Icon(
  Icons.radio_button_checked,
  size: 12,
),

对于IconButton，您可以使用

Transform.scale(
  scale: 0.5,
  child: IconButton(
    onPressed: (){},
    icon: new Image.asset("images/IG.png"),
  ),
),

【讨论】：

所以我使用缩放来调整这些图标的大小？好吧，让我试试，但非常感谢你的回答:) @CopsOnRoad
对于普通的Icon，您可以使用size，但对于带有您自己的图像的IconButton，您应该使用scale。请慢慢来，如果这有帮助，请告诉我。谢谢:)
是的。如果是普通图标，我可以使用“SIZE”，但我卡在 ICON BUTTON 案例中。这是我第一次知道图标按钮的“SCALE”。谢谢你的回答。真的帮助我。 :)

【解决方案2】：

对于第一个问题，您可以使用大小框来包含 IconButton，如果在添加更多时它会中断，请使用滚动或减小大小框相对于子元素的宽度和高度。

new SizedBox(
   height: /*calculate from width and no:of child*/,
   width: /*calculate from width and no:of child*/,
   child: new IconButton(
      padding: new EdgeInsets.all(0.0),
      icon: new Image.asset("images/IG.png"),
      onPressed: null,
   )
)

第二个问题你可以使用AssetImage('icons/heart.png', package: 'my_icons') 可以参考Doc

【讨论】：

嗯，感谢您帮助我找到解决方案的回答。但是就像 CopsOnRoad 说的那样，您的代码不适用于 IconButton。我已经尝试过了。但再次非常感谢你，@Vineeth Mohan

【解决方案3】：

我将根据这里的所有速虎答案以及我向谷歌叔叔询问的经验来回答我的问题。

如何缩放我们的图标？我的意思不是 Flutter 的默认图标。但是当您更改为图像时。 ?

@CopsOnRoad 先生在评论栏中给出了答案。它确实有效。谢谢：）我的回答：

Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Image.asset("images/line.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Wa.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/IG.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Twitter.png", width: 30,),
                          SizedBox(width: 5,),
                          Image.asset("images/Fb.png", width: 30,),

                        ],

我使用图像资源并给它们一个大小来调整大小。但这只是愚蠢的方式。你可以看到先生的好方法。警察在上面回答。

如何用图像更改图标？这是代码： Icon(Icons.star, color: Colors.red)

我的答案是使用 ImageIcon。它使图像就像一个图标。这里是代码。

  ImageIcon(AssetImage("images/Free Ongkir.png")),

因为我仍然无法将“星”更改为图像资产，所以我使用了 ImageIcon。你也可以改变大小。通过在第一个“)”后面添加“大小”。

希望这可以帮助你:)

【讨论】：

【解决方案4】：

下面的代码为IconButton 设置宽度和高度，并使其位于容器的中心。

 Container(
            height: 18.0,
            width: 18.0,
            color: Colors.yellow,
            child: new IconButton(
              padding: new EdgeInsets.all(0.0),
              color: Colors.red,
              icon: new Icon(Icons.clear, size: 18.0),
              onPressed: null,
            )
        )

输出：

【讨论】：