Flutter popup menu width implementation. In this post, I will be explaining how to change Flutter popup menu width using proper Flutter example for in depth understanding. I will explain each and every detail about Flutter popup menu width, what it is and its usage in Flutter popup menu.
What is Flutter Popup Menu Width?
Flutter popup menu width is as the name suggests, it is the width of the Flutter popup menu. To make the width wider, we will use padding. Let’s implement it using an easy Flutter example.
Default Flutter Popup Menu Width
Let’s see the default Flutter popup menu width. For that we have to define a simple Flutter popup menu button with just one flutter popup menu item to avoid bulkiness of code in this section. Let’s now see the default Flutter popup menu width. We will implement the Flutter popup menu button widget in the actions of the Flutter appbar. See the below code:
PopupMenuButton(
onSelected: (value) {},
itemBuilder: (context) {
return [
PopupMenuItem(
value: 'Home',
child: Text(
'Home',
)),
];
},
)
Change Flutter Popup Menu Width
To change the Flutter popup menu width, we have to use the padding constructor of the Flutter popup menu item. For demonstration, I have used edge in sets symmetric to give padding to only the horizontal means to increase/decrease only width of the Flutter popup menu. See the below code:
PopupMenuItem( padding: EdgeInsets.symmetric(horizontal: 40), value: 'Home', child: Text( 'Home', ))
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(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
.copyWith(topRight: Radius.circular(0))),
padding: EdgeInsets.all(10),
elevation: 10,
color: Colors.grey.shade100,
child: Container(
alignment: Alignment.center,
height: 45,
width: 45,
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
boxShadow: [BoxShadow(blurRadius: 4, color: Colors.green)],
color: Colors.white,
shape: BoxShape.circle),
child: Icon(
Icons.more_vert,
color: Colors.green,
),
),
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.green,
),
SizedBox(
width: 5,
),
Text(
'Home',
style: TextStyle(
color: Colors.green,
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.green,
),
SizedBox(
width: 5,
),
Text(
'Chats',
style: TextStyle(
color: Colors.green,
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.green,
),
SizedBox(
width: 5,
),
Text(
'Sign out',
style: TextStyle(
color: Colors.green,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
];
},
)
],
),
));
}
}Conclusion
In conclusion, hope you now have a complete in depth understanding of how to change Flutter popup menu width. I would love to have your thoughts on this article and I would also encourage you to visit my other posts on Flutter animations, Flutter app development, Flutter widgets, Flutter templates with free source code and many more. Thanks for reading this post.
