Display Popup Menu Button in Flutter

Display Popup Menu Button in Flutter

A popup menu button displays a list of menu items when it was clicked.

A popup menu button can be created using PopupMenuButton class. The itemBuilder property is used to create the items which will be displayed in the menu. The onSelected callback is called when the user selects the menu item. We can provide an icon with icon property.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

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

class _MyAppState extends State<MyApp> {
  final List<String> _items = ['Account', 'Call', 'Camera'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Dropdown button')),
        body: Center(
            child: PopupMenuButton(
          icon: const Icon(Icons.menu),
          itemBuilder: (context) {
            return _items.map((item) {
              return PopupMenuItem(
                value: item,
                child: Text(item),
              );
            }).toList();
          },
          onSelected: (item) {
            print(item);
          },
        )));
  }
}

Leave a Comment

Cancel reply

Your email address will not be published.