How To Change Flutter Icon Button Size

Flutter icon button size

In this post, I’ll demonstrate how to customize the Flutter icon button size using a straightforward but proper and easy Flutter example. I will need you to carefully look and pay attention to every detail at what I have written while you familiarize yourself with the strategy for customizing Flutter icon button size in your own Flutter apps as well. In that case, why squander more time. Let’s get right to modifying our Flutter icon button size.

What is Flutter Icon Button Size?

In this post we will understand how to change the Flutter icon button size means we will increase and decrease the icon size which will ofcourse change the size of the Flutter icon button. First we will see the default Flutter icon button size then we will change it using an easy Flutter example.

Default Flutter Icon Button Size

So to see the default Flutter icon button size, we only have to implement a simple Flutter icon button widget with required onPressed and icon constructors. We also have wrapped the icon button with Flutter container widget and gave it color so we can see the whole Flutter icon button. See the below code:

Container(
            color: Colors.blue,
            child: IconButton(
              onPressed: () {},
              icon: Icon(Icons.email, color: Colors.white),
            ),
          )
Flutter icon button default size
This is the default Flutter icon button size. Let’s now see how to change the size of icon button.

Change Flutter Icon Button Size

In order to change the Flutter icon button size, we have to use the icon size constructor of the Flutter icon button widget class. It takes a double(decimal value) but you can pass integer as well, it will convert that value automatically. We have given it a value 100 for demonstration. See the below code:

IconButton(
              iconSize: 100,
              onPressed: () {},
              icon: Icon(Icons.email, color: Colors.white),
            )
Flutter icon button custom size
As you can see in the above image, the size of Flutter icon button is now changed.
So in this way you can easily change the Flutter icon button size in your own Flutter apps as well. I would love to answer the questions regrading size of the Flutter icon button, if you have any.
I have prepared a design for you in which multiple Flutter icon button sizes are shown. The source code is given in the below section.

Flutter Icon Button Size Implementation Source Code

Flutter icon button size

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            color: Colors.blue,
            child: IconButton(
              iconSize: 80,
              onPressed: () {},
              icon: Icon(Icons.email, color: Colors.white),
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            color: Colors.blue,
            child: IconButton(
              iconSize: 50,
              onPressed: () {},
              icon: Icon(Icons.email, color: Colors.white),
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            color: Colors.blue,
            child: IconButton(
              iconSize: 15,
              onPressed: () {},
              icon: Icon(Icons.email, color: Colors.white),
            ),
          ),
        ],
      ),
    )));
  }
}

Conclusion

In conclusion, we have gained a practical understanding of what we should do to customize Flutter icon button size. I would love to have your feedback on this post. I also have many other articles about Flutter widgets, Flutter app development, Flutter animations, amazing Flutter templates with free source code, and many others that you may enjoy. Thanks for reading.

Leave a Comment

Your email address will not be published.