Skip to content

Instantly share code, notes, and snippets.

@vincevargadev
Last active February 7, 2021 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vincevargadev/3cd82881966c0e1314504e4e2e54e373 to your computer and use it in GitHub Desktop.
Save vincevargadev/3cd82881966c0e1314504e4e2e54e373 to your computer and use it in GitHub Desktop.
Simple 3-dot popup menu in the app bar in Flutter
// This gist is part of the https://github.com/dartsidedev/gists repository.
// There, you'll find further information about this gist.
// https://github.com/dartsidedev/gists#3cd82881966c0e1314504e4e2e54e373
import 'package:flutter/material.dart';
void main() => runApp(PopupDemo());
class PopupDemo extends StatefulWidget {
@override
_PopupDemoState createState() => _PopupDemoState();
}
/// Example enum.
enum Option {
first,
second,
third,
fourth,
fifth,
}
/// Convert the [option] to "human-readable" string.
String str(Option option) {
switch (option) {
case Option.first:
return 'First!';
case Option.second:
return 'Second';
case Option.third:
return 'Third';
case Option.fourth:
return 'Fourth';
case Option.fifth:
return 'Fifth';
}
}
/// A simple stateful widget to demo how the popup menu button in the app bar
/// works.
class _PopupDemoState extends State<PopupDemo> {
/// The selected option in the state.
///
/// Initial value is null to make the example more interesting :)
Option? _option;
/// Handle the option selection.
///
/// In this example, we simply set the selected option to the state
/// to keep things simple.
///
/// We could also perform any asynchronous calls, push something to the
/// navigator stack, or add some more logic.
void _onOptionSelected(Option option) => setState(() => _option = option);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Popup Demo',
// Debug banner is especially annoying for this example,
// so we turn it off.
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Popup Demo'),
actions: [
// In this example, we use the Option enum, but the generic parameter
// could also be strings, integers, or any other type
// (custom class, etc...).
//
// The PopupMenuButton automatically uses the three-dots icon.
// On Android, the three dots are vertical,
// on iOS, the dots are horizontal.
// All this is managed by Flutter automatically.
// You can test this either with two simulators/emulators,
// physical devices, or just simply change the platform in the Flutter
// inspector.
PopupMenuButton<Option>(
// Called when the user taps on a popup menu item.
onSelected: _onOptionSelected,
// Called when the button is pressed to create the items to show in
// the popup menu.
itemBuilder: (context) {
// The popup menu item builder receives the build context
// and must return a list of PopupMenuEntries.
// We could build the items manually (probably most common in
// real apps), or use map().toList().
//
// The items are lazily constructed when the button is pressed.
return [
for (final option in Option.values)
PopupMenuItem(
child: Text(str(option)),
value: option,
),
];
},
),
],
),
// In this example, we just display the last selected option.
body: Center(
child: Text(
// The initial selected option is null, so we handle that case, too.
_option != null ? str(_option!) : 'None selected',
style: Theme.of(context).textTheme.headline4,
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment