apgapg/search_widget

Search Widget Cirrus CI - Base Branch Build Status GitHub stars Twitter Follow GitHub last commit Website shields.io Open Source Love style: effective dart

This Flutter package provides a Search Widget for selecting an option from a data list. Provides filtering of items based on the search text.

PieChart

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  search_widget: <latest version>

❔ Usage

Import this class

import 'package:search_widget/search_widget.dart';

Add Search Widget

• Accepts data list as input
• Option for getting selected item. Returns selected item or null if item is deleted

onItemSelected: (item) {
    //Do whatever you would like
    setState(() {
       _selectedItem = item;
    });
 },

• Option for pop list item builder. This basically returns a widget to show as list item in popup

popupListItemBuilder: (LeaderBoard item) {
   return PopupListItem(item);
 }

• Option for filtering data list based on search query

queryBuilder: (String query, List<LeaderBoard> list) {
   return list.where((LeaderBoard item) => item.username.toLowerCase().contains(query.toLowerCase())).toList();
 }

• Option provided for selected list item builder which enables when a user selects an item from pop up list

selectedItemBuilder: (LeaderBoard selectedItem, deleteSelectedItem) {
   return SelectedItem(selectedItem,deleteSelectedItem);
 }

• Option for providing custom TextField. Accepts TextEditingController and FocusNode as parameter

textFieldBuilder: (TextEditingController controller, FocusNode focusNode) {
    return TextField(
        controller: controller,
        focusNode: focusNode,
        //... Other customizations here
       );
  },

Full Implementation

SearchWidget<LeaderBoard>(
   dataList: list,
   hideSearchBoxWhenItemSelected: false,
   listContainerHeight: MediaQuery.of(context).size.height / 4,
   queryBuilder: (String query, List<LeaderBoard> list) {
     return list.where((LeaderBoard item) => item.username.toLowerCase().contains(query.toLowerCase())).toList();
   },
   popupListItemBuilder: (LeaderBoard item) {
     return PopupListItemWidget(item);
   },
   selectedItemBuilder: (LeaderBoard selectedItem, VoidCallback deleteSelectedItem) {
     return SelectedItemWidget(selectedItem, deleteSelectedItem);
   },
   // widget customization
   noItemsFoundWidget: NoItemsFound(),
   textFieldBuilder: (TextEditingController controller, FocusNode focusNode) {
     return MyTextField(controller, focusNode);
   },
 )

Key Highlights

• Adaptive Popup Position to prevent popup getting hidden behind keyboard

PieChart PieChart

• Popup to scroll with scroll gesture if this widget is used inside ScrollView

PieChart

TODO

• [X] Give support for onItemSelected method to return selected item(s) directly
• [ ] Add support for selecting multiple items
• [ ] Add visibility bool to show selected item widget

⭐ My Flutter Packages

• pie_chart GitHub stars Flutter Pie Chart with cool animation.
• avatar_glow GitHub stars Flutter Avatar Glow Widget with glowing animation.
• json_table GitHub stars Create Flutter Json Table from json map directly.
• animating_location_pin GitHub stars Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.

⭐ My Flutter Apps

• flutter_profile GitHub stars Showcase My Portfolio: Ayush P Gupta on Playstore.
• flutter_sankalan GitHub stars Flutter App which allows reading/uploading short stories.

👍 Contribution

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request