Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to resizing an Icon / Icon Button in Flutter?

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 ?

enter image description here

  1. 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.

like image 763
Roman Traversine Avatar asked Apr 08 '19 10:04

Roman Traversine


People also ask

How do I resize icons in flutter?

You can use size property for Icon . For normal Icon you can use size but for IconButton with your own images you should use scale .

How do you change the icon button on flutter?

Create IconButton wrapped around Center Widget to make it center. Provide it with an icon and change the size of the icon using iconSize parameter. Implement the required onPressed method. Provide optional hoverColor, focusColor, splashColor parameter to IconButton.


2 Answers

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"),
  ),
),
like image 162
CopsOnRoad Avatar answered Nov 10 '22 07:11

CopsOnRoad


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

like image 28
Vineeth Mohan Avatar answered Nov 10 '22 06:11

Vineeth Mohan