Custom Popup Menu In Flutter

Mobile Apps Academy
3 min readFeb 22, 2024

In this article, We will explore how to implement a Custom Popup Menu in Flutter

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Create a enum menu elements.

We need a few variables to keep track of the clicked button.


enum Options { search, share, copy, logout }

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

var popupMenuItemIndex = 0;
String currentPage = "Home";
var appBarHeight = AppBar().preferredSize.height;

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(

),
);
}
}

Using these values, I have added a appbar widget and a PopupMenuItem.

enum Options { search, share, copy, logout }

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

var popupMenuItemIndex = 0;
String currentPage = "Home";
var appBarHeight = AppBar().preferredSize.height;

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: buildAppBarWidget(),
backgroundColor: Colors.black,
body: Center(
child: Text(currentPage, style: const TextStyle(color: Colors.white, fontSize: 40.0),),
),
),
);
}

buildAppBarWidget() {
return
}

PopupMenuItem buildPopupMenuItemWidget(String title, IconData iconData, int position) {
return
}

}

Below is the complete code.

enum Options { search, share, copy, logout }

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

var popupMenuItemIndex = 0;
String currentPage = "Home";
var appBarHeight = AppBar().preferredSize.height;

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: buildAppBarWidget(),
backgroundColor: Colors.black,
body: Center(
child: Text(currentPage, style: const TextStyle(color: Colors.white, fontSize: 40.0),),
),
),
);
}

buildAppBarWidget() {
return AppBar(
backgroundColor: Colors.black,
actions: [
PopupMenuButton(
elevation: 10,
iconColor: Colors.white,
onSelected: (value) {
onMenuItemSelected(value as int);
},
offset: Offset(0.0, appBarHeight),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))
),
itemBuilder: (ctx) => [
buildPopupMenuItemWidget("Search", Icons.search, Options.search.index),
buildPopupMenuItemWidget("Share", Icons.share, Options.share.index),
buildPopupMenuItemWidget("Copy", Icons.copy, Options.copy.index),
buildPopupMenuItemWidget("Logout", Icons.logout, Options.logout.index),
])
],
);
}

PopupMenuItem buildPopupMenuItemWidget(String title, IconData iconData, int position) {
return PopupMenuItem(
value: position,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
iconData,
color: Colors.black,
),
const SizedBox(width: 10),
Text(title)
],
)
);
}

onMenuItemSelected(int value) {
setState(() {
popupMenuItemIndex = value;
});

if (value == Options.search.index) {
currentPage = "Search";
} else if (value == Options.share.index) {
currentPage = "Share";
} else if (value == Options.copy.index) {
currentPage = "Copy";
} else {
currentPage = "Logout";
}

}

}

That’s it. You should be able to see the menu below.

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!