{"id":13548994,"url":"https://github.com/apgapg/search_widget","last_synced_at":"2025-04-06T15:13:11.575Z","repository":{"id":34461815,"uuid":"179287436","full_name":"apgapg/search_widget","owner":"apgapg","description":"Flutter package: Search Widget for selecting an option from a data list.","archived":false,"fork":false,"pushed_at":"2022-05-02T11:00:07.000Z","size":1390,"stargazers_count":198,"open_issues_count":14,"forks_count":54,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T12:09:50.607Z","etag":null,"topics":["dart","flutterpackage","fluttter","package","pub","query","search"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/search_widget","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/apgapg.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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["paypal.me/ayushpgupta"]}},"created_at":"2019-04-03T12:40:18.000Z","updated_at":"2024-08-15T04:40:19.000Z","dependencies_parsed_at":"2022-07-28T21:09:03.151Z","dependency_job_id":null,"html_url":"https://github.com/apgapg/search_widget","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apgapg%2Fsearch_widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apgapg%2Fsearch_widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apgapg%2Fsearch_widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apgapg%2Fsearch_widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apgapg","download_url":"https://codeload.github.com/apgapg/search_widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500469,"owners_count":20948880,"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":["dart","flutterpackage","fluttter","package","pub","query","search"],"created_at":"2024-08-01T12:01:16.985Z","updated_at":"2025-04-06T15:13:11.551Z","avatar_url":"https://github.com/apgapg.png","language":"Dart","readme":"# Search Widget ![Cirrus CI - Base Branch Build Status](https://img.shields.io/cirrus/github/apgapg/search_widget) [![GitHub stars](https://img.shields.io/github/stars/apgapg/search_widget.svg?style=social)](https://github.com/apgapg/search_widget) [![Twitter Follow](https://img.shields.io/twitter/url/https/@ayushpgupta.svg?style=social)](https://twitter.com/ayushpgupta) ![GitHub last commit](https://img.shields.io/github/last-commit/apgapg/search_widget.svg) [![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://play.google.com/store/apps/details?id=com.coddu.flutterprofile) [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/apgapg/search_widget) [![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://github.com/tenhobi/effective_dart)\n\n\n\nThis Flutter package provides a Search Widget for selecting an option from a data list. Provides filtering of items based on the search text.\n\n\u003cimg src=\"https://raw.githubusercontent.com/apgapg/search_widget/master/src/s1.gif\"  height = \"400\" alt=\"PieChart\"\u003e\n\n# 💻 Installation\nIn the `dependencies:` section of your `pubspec.yaml`, add the following line:\n\n[![Version](https://img.shields.io/pub/v/search_widget.svg)](https://pub.dartlang.org/packages/search_widget)\n\n```yaml\ndependencies:\n  search_widget: \u003clatest version\u003e\n```\n\n# ❔ Usage\n\n### Import this class\n\n```dart\nimport 'package:search_widget/search_widget.dart';\n```\n\n### Add Search Widget\n\n- Accepts data list as input\n- Option for getting selected item. Returns selected item or null if item is deleted\n```dart\nonItemSelected: (item) {\n    //Do whatever you would like\n    setState(() {\n       _selectedItem = item;\n    });\n },\n```\n- Option for pop list item builder. This basically returns a widget to show as list item in popup\n```dart\npopupListItemBuilder: (LeaderBoard item) {\n   return PopupListItem(item);\n }\n```\n- Option for filtering data list based on search query\n```dart\nqueryBuilder: (String query, List\u003cLeaderBoard\u003e list) {\n   return list.where((LeaderBoard item) =\u003e item.username.toLowerCase().contains(query.toLowerCase())).toList();\n }\n```\n- Option provided for selected list item builder which enables when a user selects an item from pop up list\n```dart\nselectedItemBuilder: (LeaderBoard selectedItem, deleteSelectedItem) {\n   return SelectedItem(selectedItem,deleteSelectedItem);\n }\n```\n- Option for providing custom TextField. Accepts TextEditingController and FocusNode as parameter\n```dart\ntextFieldBuilder: (TextEditingController controller, FocusNode focusNode) {\n    return TextField(\n        controller: controller,\n        focusNode: focusNode,\n        //... Other customizations here\n       );\n  },\n```\n### Full Implementation\n\n```dart\nSearchWidget\u003cLeaderBoard\u003e(\n   dataList: list,\n   hideSearchBoxWhenItemSelected: false,\n   listContainerHeight: MediaQuery.of(context).size.height / 4,\n   queryBuilder: (String query, List\u003cLeaderBoard\u003e list) {\n     return list.where((LeaderBoard item) =\u003e item.username.toLowerCase().contains(query.toLowerCase())).toList();\n   },\n   popupListItemBuilder: (LeaderBoard item) {\n     return PopupListItemWidget(item);\n   },\n   selectedItemBuilder: (LeaderBoard selectedItem, VoidCallback deleteSelectedItem) {\n     return SelectedItemWidget(selectedItem, deleteSelectedItem);\n   },\n   // widget customization\n   noItemsFoundWidget: NoItemsFound(),\n   textFieldBuilder: (TextEditingController controller, FocusNode focusNode) {\n     return MyTextField(controller, focusNode);\n   },\n )\n```\n### Key Highlights\n\n- Adaptive Popup Position to prevent popup getting hidden behind keyboard   \n\n\u003cimg src=\"https://raw.githubusercontent.com/apgapg/search_widget/master/src/s2.gif\"  height = \"400\" alt=\"PieChart\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/apgapg/search_widget/master/src/s1.gif\" style=\"margin: 0px 4px\"  height = \"400\" alt=\"PieChart\"\u003e\n\n  \n- Popup to scroll with scroll gesture if this widget is used inside ScrollView  \n\n\u003cimg src=\"https://raw.githubusercontent.com/apgapg/search_widget/master/src/s3.gif\"  height = \"400\" alt=\"PieChart\"\u003e\n\n## TODO\n\n- [X] Give support for onItemSelected method to return selected item(s) directly\n- [ ] Add support for selecting multiple items\n- [ ] Add visibility bool to show selected item widget\n\n# ⭐ My Flutter Packages\n- [pie_chart](https://pub.dartlang.org/packages/pie_chart)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/pie_chart.svg?style=social)](https://github.com/apgapg/pie_chart)  Flutter Pie Chart with cool animation.\n- [avatar_glow](https://pub.dartlang.org/packages/avatar_glow)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/avatar_glow.svg?style=social)](https://github.com/apgapg/avatar_glow)  Flutter Avatar Glow Widget with glowing animation.\n- [json_table](https://pub.dartlang.org/packages/json_table)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/json_table.svg?style=social)](https://github.com/apgapg/json_table)  Create Flutter Json Table from json map directly.\n- [animating_location_pin](https://pub.dev/packages/animating_location_pin)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/animating_location_pin.svg?style=social)](https://github.com/apgapg/animating_location_pin)  Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.\n          \n# ⭐ My Flutter Apps\n- [flutter_profile](https://github.com/apgapg/flutter_profile)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/flutter_profile.svg?style=social)](https://github.com/apgapg/flutter_profile)  Showcase My Portfolio: Ayush P Gupta on Playstore.\n- [flutter_sankalan](https://github.com/apgapg/flutter_sankalan)  [![GitHub stars](https://img.shields.io/github/stars/apgapg/flutter_sankalan.svg?style=social)](https://github.com/apgapg/flutter_sankalan)  Flutter App which allows reading/uploading short stories.\n\n# 👍 Contribution\n1. Fork it\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -m 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create new Pull Request\n","funding_links":["paypal.me/ayushpgupta"],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapgapg%2Fsearch_widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapgapg%2Fsearch_widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapgapg%2Fsearch_widget/lists"}