[英]How to resizing an Icon / Icon Button in Flutter?
I have 2 questions.我有2个问题。
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"),
),
],
)
its only 3 icons.它只有 3 个图标。 when I add more icon, its gonna break the layout into bricks yellow-black.
当我添加更多图标时,它会将布局分成黄黑色的砖块。 how to make them become smaller ?
如何让它们变小?
Question above is for IconButton.上面的问题是针对 IconButton 的。 how to change an Icon with an Image ?
如何使用图像更改图标? here are the code:
这里是代码:
Icon(Icons.star, color: Colors.red)
how to change the ' star
' with Image.asset ?如何使用 Image.asset 更改“
star
”? without any referal to other link, that only show the icon.没有任何对其他链接的引用,只显示图标。
You can use size
property for Icon
.您可以为
Icon
使用size
属性。
Icon(
Icons.radio_button_checked,
size: 12,
),
And for IconButton
you can use对于
IconButton
你可以使用
Transform.scale(
scale: 0.5,
child: IconButton(
onPressed: (){},
icon: new Image.asset("images/IG.png"),
),
),
For first question u can use sized box to contain IconButton and if it is breaking when adding more either use scroll or reduce width and height of sized box with respect to child.对于第一个问题,您可以使用大小框来包含 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,
)
)
for second question u can use AssetImage('icons/heart.png', package: 'my_icons')
you can refer Doc对于第二个问题,您可以使用
AssetImage('icons/heart.png', package: 'my_icons')
您可以参考Doc
I'm going to answer my questions based on All Suhu answers here and based on my experience asking uncle google.我将根据此处的所有 Suhu 答案以及我向谷歌叔叔询问的经验来回答我的问题。
mr @CopsOnRoad has give his answer on the comment column. @CopsOnRoad 先生在评论栏中给出了答案。 and it really works.
它确实有效。 thanks :) my answer:
谢谢:) 我的回答:
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,),
],
I use an image asset and give them a size to resize.我使用图像资产并给它们一个大小来调整大小。 but this is only dumb way.
但这只是愚蠢的方式。 the great way you can see mr.
你可以看到先生的好方法。 Cops answer above.
警察在上面回答。
Icon(Icons.star, color: Colors.red)
Icon(Icons.star, color: Colors.red)
my answer is by using ImageIcon.我的答案是使用 ImageIcon。 Its makes an image just like an icon.
它使图像就像图标一样。 here the code.
这里是代码。
ImageIcon(AssetImage("images/Free Ongkir.png")),
because I still cant change the "star" into an image asset then I used ImageIcon.因为我仍然无法将“明星”更改为图像资产,所以我使用了 ImageIcon。 you can change the size also.
你也可以改变大小。 by adding "size" behind the first ")".
通过在第一个“)”后面添加“大小”。
hope this could help you :)希望这可以帮助你:)
Below code set width & height for the IconButton
and make it to the center of your Container.下面的代码为
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,
)
)
Output:输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.