flutter - How to add divider to PopupMenuButton

Flutter - PopupMenuButton Divider

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to add a divider between PopupMenuButton items. Here we used the PopupMenuButton class’s itemBuilder property to add items to the PupupMenuButton widgets. And also add a divider line between each item by placing the PopupMenuDivider instance between items.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to lazily construct the items shown when the button is pressed.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget.

The PopupMenuDidiver class represents a horizontal divider in a material design popup menu. The PopupMenuDivider widget adapts the Divider for use in popup menus. The PopupMenuDivider() construct creates a horizontal divider for a popup menu. By default, the divider has a height of 16 logical pixels.

So finally, the flutter app developers can add a divider line between each item of a PopupMenuButton widget by placing a PopupMenuDivider instance between items.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(
          primarySwatch: Colors.indigo,
          dividerTheme: const DividerThemeData(
              color: Colors.black87,
              thickness: 1.5
          )
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Divider"),
          actions: [
            PopupMenuButton<int>(
                itemBuilder: (context) => [
                  const PopupMenuItem(child: Text("First Item")),
                  const PopupMenuDivider(),
                  const PopupMenuItem(child: Text("Second Item")),
                  const PopupMenuDivider(),
                  const PopupMenuItem(child: Text("Third Item"))
                ],
                color: Colors.blueGrey.shade50,
                offset: const Offset(0, 56)
            )
          ],
        ),
      ),
    ),
  );
}