How to Resize an Icon / Icon Button In Flutter?

Icon Widget is the primary way of introducing Icons in Flutter. and IconButton Widget acts just like a button, but with an icon instead of a usual button. so in this article, we will discuss how to resize an Icon / Icon Button in Flutter?

Let’s get started with the same.

How to Resize an Icon / Icon Button In Flutter?

You can use size property for Icon. Code Snippet will look like the below:

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

IconButton(
              onPressed: () {},
              icon: const Icon(Icons.account_box),
              iconSize: 50,
            ),

You can also try the below way:

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

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

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

Example:

 return Scaffold(
      appBar: AppBar(
        title: const Text("Icon Size Example"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("Small size Icon"),
          const Icon(
            Icons.home_filled,
            size: 40,
          ),
          const SizedBox(
            height: 40,
          ),
          const Text("This is Icon Button"),
          Center(
            child: Container(
              color: Colors.grey,
              width: 100,
              height: 50,
              child: IconButton(
                onPressed: () {
                  Fluttertoast.showToast(
                    msg: "Icon Button Clicked",
                  );
                },
                icon: const Icon(Icons.change_circle_outlined),
                iconSize: 35,
              ),
            ),
          ),
        ],
      ),
    );

We will get output like the below:

Output:

Conclusion:

Thanks for Reading !!!

Kindly drop your suggestion/feedback to serve you much better.

Do you want to convert your idea to reality? We would love to assist you with the development services.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.