Question

我有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”？没有引用其他任何链接，仅显示图标。

Answer 1

您可以将button属性用于size。

Icon

对于Icon( Icons.radio_button_checked, size: 12, ),，您可以使用

IconButton

Answer 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

Answer 3

我将根据此处的所有Suhu答案以及我问Google叔叔的经验来回答我的问题。

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

mr @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。您也可以更改大小。通过在第一个“）”后面添加“尺寸”。

希望这可以帮助您：）

Answer 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,
            )
        )

输出：

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

4 个答案: