Last active
November 25, 2022 05:35
-
-
Save MaskyS/987f85e7893b487e4575faef02f70c28 to your computer and use it in GitHub Desktop.
An example showing how we can tap on a ListTile to open a PopUpMenuButton in Flutter.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(new MaterialApp( | |
// Title | |
title: "Example App", | |
// Home | |
home: new ListTileWithPopupMenuButton() | |
)); | |
} | |
class ListTileWithPopupMenuButton extends StatefulWidget { | |
@override | |
_ListTileWithPopupMenuButtonState createState() => new _ListTileWithPopupMenuButtonState(); | |
} | |
class _ListTileWithPopupMenuButtonState extends State<ListTileWithPopupMenuButton> { | |
/// Holds the selected lucky number. | |
int selectedLuckyNumber; | |
/// A list of lucky numbers. | |
List<int> luckyNumbersList = [7, 69, 420, 100]; | |
/// The key for the PopUpMenButton. Basically it's a reference to the button, | |
/// i.e we can control the Menu by using this key as done below. | |
final GlobalKey _menuKey = new GlobalKey(); | |
@override | |
Widget build(BuildContext context) { | |
return new Scaffold( | |
appBar: new AppBar( | |
title: new Text("Lucky Number selector",), | |
), | |
body: new Center( | |
child: _buildListTile()), | |
); | |
} | |
/// Builds a ListTile containing a PopupMenuButton. | |
Widget _buildListTile(){ | |
/// The list containing the [PopUpMenuItem]s | |
List<PopupMenuItem> luckyNumbers = []; | |
// Add each luckyNumber name into the list of PopupMenuItems, [luckyNumbers] | |
for (int luckyNumber in luckyNumbersList) { | |
luckyNumbers.add( | |
new PopupMenuItem( | |
child: new Text("$luckyNumber"), | |
value: luckyNumber, | |
) | |
); | |
} | |
/// When a [PopUpMenuItem] is selected, we assign its value to | |
/// selectedLuckyNumber and rebuild the widget. | |
void handlePopUpChanged(int value) { | |
setState(() { | |
selectedLuckyNumber = value; | |
}); | |
/// Log the selected lucky number to the console. | |
print("The lucky number you selected was $selectedLuckyNumber"); | |
} | |
return new ListTile( | |
/// The leading widget is a text widget displaying the [selectedLuckyNumber]; | |
/// this is to show off the statefulness of this class ;p | |
leading: new Text(selectedLuckyNumber.toString()), | |
/// The title of the list tile. | |
title: new Text("Your lucky number"), | |
trailing: new PopupMenuButton( | |
key: _menuKey, | |
onSelected: (selectedDropDownItem) => handlePopUpChanged(selectedDropDownItem), | |
itemBuilder: (BuildContext context) => luckyNumbers, | |
tooltip: "Tap me to select a number.", | |
), | |
/// When ListTile is tapped, open the popUpMenuButton! Notice how we use | |
/// menuKey to do that. | |
onTap: () { | |
dynamic popUpMenustate = _menuKey.currentState; | |
popUpMenustate.showButtonMenu(); | |
}, | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What I just needed. Thank you