Flutter popup menu icon size customization. In this post, I will be changing the Flutter popup menu icon size with proper explanation using an easy Flutter example code. I will implement Flutter popup menu icon size customization using step by step explanation so you don’t have any queries left regarding how to change Flutter popup menu icon size.
What is Flutter Popup Menu Icon Size?
Flutter popup menu icon size is the size of the icon of the Flutter popup menu button. In this post, we will also see what the default Flutter popup menu icon size is and how we will change it. So let’s get right into explaining how to change Flutter popup menu icon size.
Default Flutter Popup Menu Icon Size
To see the default Flutter popup menu icon size, we have to define the Flutter popup menu button widget, we also have given it one Flutter popup menu item so when we tap on the Flutter popup menu icon then it will show a Flutter popup menu icon with one item. We have defined Flutter popup menu icon inside the actions constructor of the Flutter appbar widget. See the below code:
PopupMenuButton(
onSelected: (value) {},
itemBuilder: (context) {
return [
PopupMenuItem(
padding: EdgeInsets.only(right: 50, left: 20),
value: 'Home',
child: Text(
'Home',
style: TextStyle(
color: Colors.green,
fontSize: 13,
fontWeight: FontWeight.w500),
)),
];
},
)
As you can see in the above image, this is the default Flutter popup menu icon size. Now let’s see how we can change the size of the Flutter popup menu icon.
Change Flutter Popup Menu Icon Size
To change the Flutter popup menu icon size, we have to use the icon size constructor of the Flutter popup menu button widget class. It takes a double value. For demonstration, we have passed it a greater value to show that the size of the icon changes with it. See the below code:
iconSize: 30
Custom Flutter Popup Menu Design 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 StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
toolbarHeight: 80,
elevation: 0,
backgroundColor: Colors.transparent,
actions: [
PopupMenuButton(
iconSize: 40,
icon: Icon(
Icons.more_vert,
color: Colors.purple,
),
elevation: 10,
color: Colors.grey.shade100,
onSelected: (value) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$value item pressed')));
},
itemBuilder: (context) {
return [
PopupMenuItem(
padding: EdgeInsets.only(right: 50, left: 20),
value: 'Home',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.home,
size: 20,
color: Colors.purple,
),
SizedBox(
width: 5,
),
Text(
'Home',
style: TextStyle(
color: Colors.purple,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
PopupMenuItem(
padding: EdgeInsets.only(right: 50, left: 20),
value: 'Chats',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.chat,
size: 20,
color: Colors.purple,
),
SizedBox(
width: 5,
),
Text(
'Chats',
style: TextStyle(
color: Colors.purple,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
PopupMenuItem(
padding: EdgeInsets.only(right: 50, left: 20),
value: 'Sign out',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.logout,
size: 20,
color: Colors.purple,
),
SizedBox(
width: 5,
),
Text(
'Sign out',
style: TextStyle(
color: Colors.purple,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
];
},
)
],
),
));
}
}Conclusion
In conclusion, hope you now have an accurate practical understanding of how to change Flutter popup menu icon size. Your feedback is very much appreciated, and I invite you to also take a look at my other articles on Flutter animations, Flutter app development, Flutter widgets, Flutter templates with source code, and much more. Thank you for reading this post.
