Custom Popup Menu In Flutter

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

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

Mobile Apps Academy

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.

GitHub - Mobile-Apps-Academy/CustomPopupMenuFlutter

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

Mobile Apps Academy

Social Handles

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

Twitter : https://twitter.com/MobileAppsAcdmy

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