class _SettingsPopupMenuState extends State<SettingsPopupMenu> {
static const Map<String, IconData> _options = {
'Settings' : Icons.favorite_border,
'Share' : Icons.bookmark_border,
'Logout' : Icons.share,
};
void _showPopup(BuildContext context) async {
//*get the render box from the context
final RenderBox renderBox = context.findRenderObject() as RenderBox;
//*get the global position, from the widget local position
final offset = renderBox.localToGlobal(Offset.zero);
//*calculate the start point in this case, below the button
final left = offset.dx;
final top = offset.dy + renderBox.size.height;
//*The right does not indicates the width
final right = left + renderBox.size.width;
//*show the menu
final value = await showMenu<String>(
// color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)
),
context: context,
position: RelativeRect.fromLTRB(left, top, right, 0.0),
items: _options.entries.map<PopupMenuEntry<String>>((entry) {
return PopupMenuItem(
value: entry.key,
child: SizedBox(
// width: 200, //*width of popup
child: Row(
children: [
Icon(entry.value, color: Colors.redAccent),
const SizedBox(width: 10.0),
Text(entry.key)
],
),
),
);
}).toList()
);
print(value);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Popup Settings'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//*encloses the widget from which the relative positions will be
//*taken in a builder, in this case a button
Builder(
builder: (context) {
return RawMaterialButton(
fillColor: Colors.indigo,
constraints: const BoxConstraints(minWidth: 200),
onPressed: () => _showPopup(context),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)
),
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: const Text('Show Menu', style: TextStyle(color:
Colors.white)),
);
}
),
],
),
),
);
}
}
Tags:
showMenu