Skip to main content

​
ChromiaPopupMenu

A customizable popup menu component that displays a list of menu items.

​
Basic Usage

ChromiaPopupMenu<String>(
  items: [
    ChromiaMenuItem(
      value: 'edit',
      label: 'Edit',
      icon: Icons.edit,
    ),
    ChromiaMenuItem(
      value: 'delete',
      label: 'Delete',
      icon: Icons.delete,
    ),
  ],
  onSelected: (value) {
    print('Selected: $value');
  },
  child: Icon(Icons.more_vert),
)

​
Parameters

​
items
List<ChromiaMenuItem<T>>
required
List of menu items
​
onSelected
ValueChanged<T>
required
Called when an item is selected
​
child
Widget?
Custom child widget (e.g., button)
​
icon
IconData?
Icon to display (used if child is null)
​
initialValue
T?
Initial selected value
​
offset
Offset
default:"Offset.zero"
Offset of the menu from the button

​
ChromiaMenuItem

A single menu item.

​
Constructor

const ChromiaMenuItem<T>({
  required T? value,
  required String label,
  IconData? icon,
  Widget? trailing,
  bool enabled = true,
  bool isDivider = false,
})

​
Parameters

​
value
T?
required
Value of the item
​
label
String
required
Label text
​
icon
IconData?
Leading icon
​
trailing
Widget?
Trailing widget (e.g., shortcut text)
​
enabled
bool
default:"true"
Whether the item is enabled
​
isDivider
bool
default:"false"
Whether this is a divider

​
Creating a Divider

ChromiaMenuItem<String>.divider()

​
Example with Dividers

ChromiaPopupMenu<String>(
  items: [
    ChromiaMenuItem(value: 'edit', label: 'Edit', icon: Icons.edit),
    ChromiaMenuItem(value: 'copy', label: 'Copy', icon: Icons.copy),
    ChromiaMenuItem<String>.divider(),
    ChromiaMenuItem(value: 'delete', label: 'Delete', icon: Icons.delete),
  ],
  onSelected: (value) {
    // Handle selection
  },
)

​
ChromiaContextMenu

A context menu that shows on long press or right click.

​
Basic Usage

ChromiaContextMenu<String>(
  items: [
    ChromiaMenuItem(
      value: 'copy',
      label: 'Copy',
      icon: Icons.copy,
    ),
    ChromiaMenuItem(
      value: 'paste',
      label: 'Paste',
      icon: Icons.paste,
    ),
  ],
  onSelected: (value) {
    print('Selected: $value');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.grey[200],
    child: Text('Long press or right click me'),
  ),
)

​
Parameters

​
items
List<ChromiaMenuItem<T>>
required
List of menu items
​
onSelected
ValueChanged<T>
required
Called when an item is selected
​
child
Widget
required
Child widget that triggers the context menu

​
ChromiaMenuButton

A dropdown menu button with a label and optional icon.

​
Basic Usage

String? selectedSort = 'name';

ChromiaMenuButton<String>(
  label: 'Sort by',
  icon: Icons.sort,
  selectedValue: selectedSort,
  items: [
    ChromiaMenuItem(
      value: 'name',
      label: 'Name',
      icon: Icons.text_fields,
    ),
    ChromiaMenuItem(
      value: 'date',
      label: 'Date',
      icon: Icons.calendar_today,
    ),
    ChromiaMenuItem(
      value: 'size',
      label: 'Size',
      icon: Icons.storage,
    ),
  ],
  onSelected: (value) {
    setState(() {
      selectedSort = value;
    });
  },
)

​
Parameters

​
items
List<ChromiaMenuItem<T>>
required
List of menu items
​
onSelected
ValueChanged<T>
required
Called when an item is selected
​
label
String?
Button label
​
selectedValue
T?
Currently selected value
​
icon
IconData?
Leading icon

​
Complete Example

class MenuExample extends StatefulWidget {
  @override
  State<MenuExample> createState() => _MenuExampleState();
}

class _MenuExampleState extends State<MenuExample> {
  String? _selectedFilter = 'all';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChromiaAppBar(
        title: 'Menu Example',
        actions: [
          ChromiaMenuButton<String>(
            selectedValue: _selectedFilter,
            items: [
              ChromiaMenuItem(
                value: 'all',
                label: 'All Items',
                icon: Icons.list,
              ),
              ChromiaMenuItem(
                value: 'active',
                label: 'Active',
                icon: Icons.check_circle,
              ),
              ChromiaMenuItem(
                value: 'completed',
                label: 'Completed',
                icon: Icons.done_all,
              ),
            ],
            onSelected: (value) {
              setState(() {
                _selectedFilter = value;
              });
            },
          ),
          ChromiaPopupMenu<String>(
            items: [
              ChromiaMenuItem(
                value: 'settings',
                label: 'Settings',
                icon: Icons.settings,
              ),
              ChromiaMenuItem(
                value: 'help',
                label: 'Help',
                icon: Icons.help,
              ),
              ChromiaMenuItem<String>.divider(),
              ChromiaMenuItem(
                value: 'about',
                label: 'About',
                icon: Icons.info,
              ),
            ],
            onSelected: (value) {
              print('Selected: $value');
            },
          ),
        ],
      ),
      body: Center(
        child: ChromiaContextMenu<String>(
          items: [
            ChromiaMenuItem(
              value: 'copy',
              label: 'Copy',
              icon: Icons.copy,
              trailing: Text('Ctrl+C'),
            ),
            ChromiaMenuItem(
              value: 'paste',
              label: 'Paste',
              icon: Icons.paste,
              trailing: Text('Ctrl+V'),
            ),
            ChromiaMenuItem<String>.divider(),
            ChromiaMenuItem(
              value: 'delete',
              label: 'Delete',
              icon: Icons.delete,
              enabled: false,
            ),
          ],
          onSelected: (value) {
            context.showSuccessSnackBar(
              message: 'Action: $value',
            );
          },
          child: Container(
            padding: EdgeInsets.all(32),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text('Right click or long press for context menu'),
          ),
        ),
      ),
    );
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us