How to resizing an Icon / Icon Button in Flutter?

Question

I have 2 questions.

1. how to scale our icon ? I mean not a default icon from Flutter. but when you change into an Image. I have an Icon Button with an image like this:

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. when I add more icon, its gonna break the layout into bricks yellow-black. how to make them become smaller ?

2. Question above is for 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 ? without any referal to other link, that only show the icon.

Answer 1

Below code set width & height for the IconButton and make it to the center of your Container.

 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:

Answer 2

I'm going to answer my questions based on All Suhu answers here and based on my experience asking uncle google.

1. how to scale our icon ? I mean not a default icon from Flutter. but when you change into an Image. ?

mr @CopsOnRoad has give his answer on the comment column. 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.

2. how to change an Icon with an Image ? here are the code: Icon(Icons.star, color: Colors.red)

my answer is by using 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. you can change the size also. by adding "size" behind the first ")".

hope this could help you :)

Answer 3

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.

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

Answer 4

You can use size property for Icon.

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

And for IconButton you can use

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