Flutter popup menu item height customization. In this article, we will be changing the Flutter popup menu item height using an easy Flutter example and a proper step by step explanation so you can have a complete understanding of how to change Flutter popup menu item height. So lets jump directly into understanding what Flutter popup menu item height is and how to change it.
What is Flutter Popup Menu Item Height?
Flutter popup menu item height is as the name suggests, it is the height of the popup menu items height. We can give each item different height. In this post, we will change the default Flutter popup menu item height. First we will see what the default popup item height is, then we will implement the customization of it.
Default Flutter Popup Menu Item Height
To see the default height of the Flutter popup menu item, we have to define a simple Flutter popup menu button widget. To show the default item height, we have to define atleast one Flutter popup menu item. We will be implementing the Flutter popup menu button widget in the actions constructor of the Flutter appbar widget. See the below code:
PopupMenuButton(
onSelected: (value) {},
itemBuilder: (context) {
return [
PopupMenuItem(
value: 'Home',
child: Text(
'Home',
style: TextStyle(
color: Colors.purple,
fontSize: 13,
fontWeight: FontWeight.w500),
)),
];
},
)
Change Flutter Popup Menu Item Item Height
To change the Flutter popup menu item height, we have to use the height constructor of the Flutter popup menu item. The height constructor takes a double value. For demonstration, we have given it a 70 value. See the below code:
height: 70
Beautiful 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(
icon: Icon(
Icons.more_vert,
color: Colors.purple,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
.copyWith(topRight: Radius.circular(0))),
padding: EdgeInsets.all(10),
elevation: 10,
color: Colors.grey.shade100,
onSelected: (value) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$value item pressed')));
},
itemBuilder: (context) {
return [
PopupMenuItem(
height: 80,
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(
height: 80,
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(
height: 80,
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, now you have a practical knowledge of how to change Flutter popup menu item height. I would love to hear what you think about this post in comment section. I would also encourage you to drop a visit at my other posts on Flutter development, Flutter widgets, Flutter animations, amazing Flutter templates and many more. Thank you for reading.
