Flutter popup menu shape customization. In this post, I will be changing the Flutter popup menu shape though proper practical Flutter example code so it can be easy for you to understand how to change Flutter popup menu shape. I will be discussing everything about Flutter popup menu, what it is, its role and usage in Flutter app.
What is Flutter Popup Menu Shape?
Flutter popup menu shape, as the name suggests, it is the shape of Flutter popup menu. Flutter popup menu button is used to show a beautiful popup menu. It has a menu icon button, when we tap on it then a popup menu is show with beautiful animation. In this post, we will see how we can change the shape of that popup menu.
For demonstration, we will give our Flutter popup menu a circular shape. Let’s now start implementing the customization of Flutter popup menu shape using an easy Flutter example code.
Default Flutter Popup Menu Shape
Let’s first see what the default Flutter popup menu shape looks like. For that we have to define a simple Flutter popup menu button, item builder constructor takes a list of Flutter popup menu items. I have passed one item to it for now. I have defined that Flutter popup menu button in Flutter appbar widget using the appbar action constructor which takes a list of widgets. See the below code:
PopupMenuButton(
onSelected: (value) {},
itemBuilder: (context) {
return [
PopupMenuItem(
value: 'Home',
child: Text(
'Home',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
fontWeight: FontWeight.w500),
),
),
];
},
)
Circular Flutter Popup Menu Shape
To make the shape circular of the popup menu, we have to use the shape constructor of the Flutter popup menu button widget class. We will pass the round rectangle border to it and by using its border radius constructor, we can change the shape of Flutter popup menu. In our case, we have pass border radius circular to make all the edges circular with same value. See the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20))
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(
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.black45)],
color: Colors.white,
shape: BoxShape.circle),
child: Icon(
Icons.more_vert,
color: Colors.grey,
),
),
onSelected: (value) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$value item pressed')));
},
itemBuilder: (context) {
return [
PopupMenuItem(
value: 'Home',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.home,
size: 20,
color: Colors.black45,
),
SizedBox(
width: 5,
),
Text(
'Home',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
PopupMenuItem(
value: 'Chats',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.chat,
size: 20,
color: Colors.black45,
),
SizedBox(
width: 5,
),
Text(
'Chats',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
PopupMenuItem(
value: 'Statistics',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.bar_chart,
size: 20,
color: Colors.black45,
),
SizedBox(
width: 5,
),
Text(
'Statistics',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
PopupMenuItem(
value: 'Sign out',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.logout,
size: 20,
color: Colors.black45,
),
SizedBox(
width: 5,
),
Text(
'Sign out',
style: TextStyle(
color: Colors.black54,
fontSize: 13,
fontWeight: FontWeight.w500),
),
],
),
Divider()
],
)),
];
},
)
],
),
));
}
}Conclusion
In conclusion, I hope now you have a complete understanding of how to customize Flutter popup menu shape. Use it in your code and share your experience with us using the comment section. We would love to hear how you use it in your Flutter app. We would be looking forward to your feedback. I would also encourage you to visit my other articles on Flutter app development, Flutter widgets, Flutter animations, Flutter amazing templates with free source code and many more. Thank you for reading this post.
