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),
),
)
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 Size Implementation Source Code
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.
