Flutter Popup Menu Button Example

Hey! In this article, I’m going to explain how to implement a popup menu button (PopupMenuButton) in a flutter with 2 examples

What you’ll learn?

• You’ll learn how to implement PopupMenuButton in the flutter project
• How to access/display data from PopupMenuButton
• How to navigate between pages using PopupMenuButton

Real wold usage:

• Generally, PopupMenuButton are used in AppBar to display some quick menu options
• Based on user selection, you can perform some action or navigate to other pages

Flutter Popup Menu Button Example

PopupMenuButton(
  onSelected: (value) {
    // your logic
  },
  itemBuilder: (BuildContext bc) {
    return const [
      PopupMenuItem(
        child: Text("Hello"),
        value: '/hello',
      ),
      PopupMenuItem(
        child: Text("About"),
        value: '/about',
      ),
      PopupMenuItem(
        child: Text("Contact"),
        value: '/contact',
      )
    ];
  },
)

Code Explanation:

• We used PopupMenuButton to create a popup menu
• itemBuilder will provide widgets to show inside PopupMenuButton, which we need to return PopupMenuItem.
• In PopupMenuItem, you can pass a child widget (it can be any widget such as text, icon, or combination of both using Row). PopupMenuItem also has a parameter called value, which is used to pass when onSelected is called
• inside onSelected, you can write any action you want.

Flutter Popup Menu Button Complete Example

popup-button-example.dart

import 'package:flutter/material.dart';

class PopupMenuButtonExample1 extends StatefulWidget {
  const PopupMenuButtonExample1({Key? key}) : super(key: key);

  @override
  _PopupMenuButtonExample1State createState() =>
      _PopupMenuButtonExample1State();
}

class _PopupMenuButtonExample1State extends State {
  var selectedItem = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("AppMaking.com"),
        centerTitle: true,
        actions: [
          PopupMenuButton(onSelected: (value) {
            // your logic
            setState(() {
              selectedItem = value.toString();
            });
            print(value);
            Navigator.pushNamed(context, value.toString());
          }, itemBuilder: (BuildContext bc) {
            return const [
              PopupMenuItem(
                child: Text("Hello"),
                value: '/hello',
              ),
              PopupMenuItem(
                child: Text("About"),
                value: '/about',
              ),
              PopupMenuItem(
                child: Text("Contact"),
                value: '/contact',
              )
            ];
          })
        ],
      ),
      body: Center(
        child: Text(selectedItem),
      ),
    );
  }
}

contact.dart

import 'package:flutter/material.dart';

class AboutScreen extends StatelessWidget {
  const AboutScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("About"),
      ),
      body: const Center(
        child: Text("About"),
      ),
    );
  }
}

contact.dart

import 'package:flutter/material.dart';

class ContactScreen extends StatelessWidget {
  const ContactScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Contact"),
      ),
      body: const Center(
        child: Text("Contact"),
      ),
    );
  }
}

hello.dart

import 'package:flutter/material.dart';

class HelloScreen extends StatelessWidget {
  const HelloScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello"),
      ),
      body: const Center(
        child: Text("Hello"),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'screens/about.dart';
import 'screens/contact.dart';
import 'screens/hello.dart';
import 'screens/popup-button-example.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: const PopupMenuButtonExample1(),
      routes: {
        '/hello': (context) => const HelloScreen(),
        '/contact': (context) => const ContactScreen(),
        '/about': (context) => const AboutScreen()
      },
    );
  }
}

Code Explanation:

• In the above example, we have created 3 pages such as HelloScreen, ContactScreen, AboutScreen
• When the user pressed popupMenuButton, we used navigator.pushNamed() to navigate between pages
• we also gave routes inside main.dart