I am facing a problem that my PopupMenuButton not showing when I click on, I tried many solutions but without success.
I am also searched in google but with not results.
I am afraid I am facing a bug.
Here is my code
enum MyMenuEntries { edit, delete }
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () =>
PopupMenuButton<MyMenuEntries>(
onSelected:
(MyMenuEntries entry) {},
itemBuilder:
(BuildContext context) => [
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.edit,
child: ListTile(
leading: Icon(Icons.edit),
title: Text("Edit")),
),
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.delete,
child: ListTile(
leading: Icon(Icons.delete),
title: Text("Delete")),
),
],
))
Please any answer could help me.
Thanks!
Instead of using an IconButton, you can use the PopUpMenuButton as is and supply the icon to its icon property. It will automatically show the PopUpMenuButton items.
So you should remove the IconButton and your code will be:
PopupMenuButton<MyMenuEntries>(
onSelected:
(MyMenuEntries entry) {},
itemBuilder:
(BuildContext context) => [
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.edit,
child: ListTile(
leading: Icon(Icons.edit),
title: Text("Edit")),
),
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.delete,
child: ListTile(
leading: Icon(Icons.delete),
title: Text("Delete")),
),
],
icon: Icon(Icons.more_vert),
)
Related
Halo,
First, I wanna show you my current UI :
And here's the code for red circle function :
InkWell(
onTap: null,
child: Icon(Icons.more_horiz,
size: 18,
color: Color.fromRGBO(0, 0, 0, 0.25),
),
),
What action I needed is to show pop-up menu like this after click the icon, for example :
I need that to create edit and delete with function to navigate to another page, and need to know how to control menu position.
I already check on pub.dev, but it didn't resolve my problem.
Can anyone give me an advice?
Try this code :
the package is here : https://pub.dev/packages/pull_down_button
PullDownButton(
itemBuilder: (context) => [
PullDownMenuItem(
title: 'Menu item',
onTap: () => action(),
),
const PullDownMenuDivider(),
PullDownMenuItem(
title: 'Menu item 2',
onTap: () => action2(),
),
],
position: PullDownMenuPosition.under,
buttonBuilder: (context, showMenu) => CupertinoButton(
onPressed: showMenu,
padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.ellipsis_circle),
),
);
result :
You can try using PopupMenuButton you can find here an example
Try below code hope its help to you. and used PopupMenuButton
Declare Key Variable:
final GlobalKey menuKey = GlobalKey();
Widget:
InkWell(
onTap: () {
dynamic state = menuKey.currentState;
state.showButtonMenu();
},
child: PopupMenuButton(
key: menuKey,
itemBuilder: (_) => const <PopupMenuItem<String>>[
PopupMenuItem<String>(
child: Text('Show Test'),
value: 'Test',
),
PopupMenuItem<String>(
child: Text('Edit Test Solution'),
value: 'Edit',
),
],
onSelected: (_) {},
),
),
Result->
I want to confirm exiting the app when the back button on the appbar is pressed.
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Save and Exit?'),
content: Text('are you sure you want to save and exit?'),
actions: [
FlatButton(
onPressed: () => Navigator.pop(context, false),
child: Text('No'),
),
FlatButton(
onPressed: () => Navigator.pop(context, true),
child: Text('Yes'),
),
],
);
},
);
// Navigator.pop(context);
},
),
I tried this but didn't work.
I have found some answers on how to do it when the system back button is pressed using WillPopScope but none of them work in my case.
Help me out
You can check it with Navigator.canPop(context) i guess. It will return true or false.
in onPressed you can check it, if it's true you can do Navigator.pop(context) otherwise call showDialog.
there is link of doc
https://api.flutter.dev/flutter/widgets/Navigator/canPop.html
what is this overlap widget ? or is this some kind of effect ? please
Use this function on button click:
void _settingModalBottomSheet(BuildContext context){
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.music_note),
title: new Text('Music'),
onTap: () => {}
),
new ListTile(
leading: new Icon(Icons.videocam),
title: new Text('Video'),
onTap: () => {},
),
],
),
);
});
}
It's called ModalBottomSheet, You can use this package to create powerful modal bottom sheets.
How could I do so that on the onTap of the line I open another ListTile below?
return ListTile(
title: Html(data: "<br/> <b>${team[index]['code']}</b>"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
setState(() {
// call open colapsed or child listtile here
});
},
);
If I understand your question correctly, you want to show more ListTile items when the user taps on one of the ListTile items?
If that's the case, you can use ExpansionTile instead.
Here is an example code:
ExpansionTile(
onExpansionChanged: (res) {
print(res ? 'Open' : 'Close');
},
title: Text('Dropdown'),
children: [
ListTile(
title: Text('Test #1'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('Test #1');
},
),
ListTile(
title: Text('Test #1'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('Test #1');
},
),
],
)
P.S. You can also nest ExpansionTile inside another ExpansionTile.
I'm trying to get a popupmenu under a ListTile. The title displays a description, the subtitle displays the selected value with some message and the onTap opens the popupmenu in which a user can select a value.
I tried putting a DropdownButtonHideUnderline in the subtitle, but this displays an arrow and does not respond to the ListTile onTab obviously.
How can I get a popupmenu on a ListTile?
Maybe you can try PopuMenuButton,
PopupMenuButton<String>(
onSelected: (String value) {
setState(() {
_selection = value;
});
},
child: ListTile(
leading: IconButton(
icon: Icon(Icons.add_alarm),
onPressed: () {
print('Hello world');
},
),
title: Text('Title'),
subtitle: Column(
children: <Widget>[
Text('Sub title'),
Text(_selection == null ? 'Nothing selected yet' : _selection.toString()),
],
),
trailing: Icon(Icons.account_circle),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'Value1',
child: Text('Choose value 1'),
),
const PopupMenuItem<String>(
value: 'Value2',
child: Text('Choose value 2'),
),
const PopupMenuItem<String>(
value: 'Value3',
child: Text('Choose value 3'),
),
],
)
Take a look at How to open a PopupMenuButton?