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.

Solution 1

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

Solution 2

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

Solution 3

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: