{"id":18794686,"url":"https://github.com/huextrat/menu_button","last_synced_at":"2025-06-14T03:38:30.681Z","repository":{"id":43010834,"uuid":"235106859","full_name":"huextrat/menu_button","owner":"huextrat","description":"Flutter plugin to display a popup menu button widget with handsome design and easy to use.","archived":false,"fork":false,"pushed_at":"2024-01-22T07:27:30.000Z","size":4291,"stargazers_count":65,"open_issues_count":15,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T15:13:24.352Z","etag":null,"topics":["android","dart","dependency","flutter","ios","package","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/menu_button","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huextrat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"huextrat","custom":"https://twitter.com/hugoextrat"}},"created_at":"2020-01-20T13:24:03.000Z","updated_at":"2024-07-23T10:42:10.000Z","dependencies_parsed_at":"2023-12-15T03:38:21.948Z","dependency_job_id":"9cc5f1c7-48ee-48be-b1d0-be09cd00b41b","html_url":"https://github.com/huextrat/menu_button","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huextrat%2Fmenu_button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huextrat%2Fmenu_button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huextrat%2Fmenu_button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huextrat%2Fmenu_button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huextrat","download_url":"https://codeload.github.com/huextrat/menu_button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732488,"owners_count":21152852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dart","dependency","flutter","ios","package","widget"],"created_at":"2024-11-07T21:30:29.385Z","updated_at":"2025-04-13T15:13:29.648Z","avatar_url":"https://github.com/huextrat.png","language":"Dart","funding_links":["https://github.com/sponsors/huextrat","https://twitter.com/hugoextrat"],"categories":[],"sub_categories":[],"readme":"# menu_button\n\n[![Pub Package](https://img.shields.io/pub/v/menu_button.svg?style=for-the-badge\u0026color=blue)](https://pub.dartlang.org/packages/menu_button)\n![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026color=blue)\n\nFlutter widget to display a popup menu button very simply and easily customizable.\n\n## Resources\n\n- [Documentation](https://pub.dev/documentation/menu_button/latest/menu_button/MenuButton-class.html)\n- [Pub Package](https://pub.dev/packages/menu_button)\n- [GitHub Repository](https://github.com/huextrat/menu_button)\n\n## Installations\n\nAdd `menu_button: ^1.4.2+1` in your `pubspec.yaml` dependencies. And import it:\n\n```dart\nimport 'package:menu_button/menu_button.dart';\n```\n\n## Usage\n\nThe widget has a lot of properties to customize it, we will see here the ones needed to get a \"basic\" menu button.\n\nFirstly we have to declare a variable to keep the selected item (`selectedKey`) and a list that contains all the items we want to display in this menu button.\n\nHere we will make a list of strings that we will call `keys` and that contains the values `Low`, `Medium` \u0026 `High`.\n\n```dart\nString selectedKey;\n\nList\u003cString\u003e keys = \u003cString\u003e[\n  'Low',\n  'Medium',\n  'High',\n];\n```\n\nNow that we have these two elements we can start using the `MenuButton\u003cT\u003e` widget.\n\n```dart\nMenuButton\u003cString\u003e(\n  child: normalChildButton,\n  items: keys,\n  itemBuilder: (String value) =\u003e Container(\n   height: 40,\n   alignment: Alignment.centerLeft,\n   padding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 16),\n   child: Text(value),\n  ),\n  toggledChild: Container(\n    child: normalChildButton,\n  ),\n  onItemSelected: (String value) {\n    setState(() {\n      selectedKey = value;\n    });\n  },\n  onMenuButtonToggle: (bool isToggle) {\n    print(isToggle);\n  },\n)\n```\n\nAnd finally here is an example of the `child` widget used for the MenuButton above:\n\n```dart\nfinal Widget normalChildButton = SizedBox(\n  width: 93,\n  height: 40,\n  child: Padding(\n    padding: const EdgeInsets.only(left: 16, right: 11),\n    child: Row(\n      mainAxisAlignment: MainAxisAlignment.spaceBetween,\n      children: \u003cWidget\u003e[\n        Flexible(\n          child: Text(selectedKey, overflow: TextOverflow.ellipsis)\n        ),\n        const SizedBox(\n          width: 12,\n          height: 17,\n          child: FittedBox(\n            fit: BoxFit.fill,\n            child: Icon(\n              Icons.arrow_drop_down,\n              color: Colors.grey,\n            ),\n          ),\n        ),\n      ],\n    ),\n  ),\n);\n```\n\nOf course you can make your own according to your needs.\n\n## Basic Parameters\n\n| Parameter | Description |\n|---|---|\n| `child` | A widget to display the default button to trigger the menu button |\n| `items` | The list that contains all values that you want to display on the menu button |\n| `itemBuilder` | A widget to design each item of the menu button |\n| `onItemSelected` | Function triggered when an item is selected |\n| `onMenuButtonToggle` | Function triggered when menu button is triggered (`true` if displayed, `false` if not) |\n| `toggledChild` | Same as child but when the menu button is opened |\n\n## More Parameters\n\n| Parameter | Description |\n|---|---|\n| `crossTheEdge` | By default `false` you can set it to `true` if you want the button to expand |\n| `divider` | A custom divider between each items |\n| `decoration` | A custom decoration for menu button |\n| `edgeMargin` | By default `0` add a custom value to prevent the button to not touch the edge, check the example `edge_menu_button.dart` for more information |\n| `itemBackgroundColor` | By default `Colors.white` add custom Colors to customize the background of every items |\n| `label` | Add a widget to display a custom label as MaterialDesign on top of the button, check `label_menu_button.dart` for more information |\n| `labelDecoration` | If you use a `label` you can set a custom `LabelDecoration` |\n| `menuButtonBackgroundColor` | By default `Colors.white` add custom Colors to customize the background of the menu button |\n| `popupHeight` | By default `popupHeight` is automatically calculated but if you need a custom height use this property |\n| `scrollPhysics` | By default items are not scrollable (`NeverScrollableScrollPhysics`), add a ScrollPhysics to enable it, for instance `AlwaysScrollableScrollPhysics` |\n| `showSelectedItemOnList` | By default `true`, set it to `false` if you don't want the selected items in the list |\n\n---\n\nFor a more detail example please take a look at the `example` folder.\n\n## Example\n\nMenu button with 3 items:\n\n\u003cimg src=\"https://raw.githubusercontent.com/huextrat/menu_button/master/example/new_example.gif\" width=\"400\" height=\"790\"\u003e\n\n---\n\nIf something is missing, feel free to open a ticket or contribute!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuextrat%2Fmenu_button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuextrat%2Fmenu_button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuextrat%2Fmenu_button/lists"}