Adding a filter function to searchbar

Agnes Jang

unread,

Jan 18, 2019, 2:17:26 PM1/18/19

to Flutter Dev

Hi all,

I'm creating an app with Flutter and working on adding searching functionality to said app. Currently, I have a search bar and I've added a label icon because I want to filter my results. However, I can't figure out how to trigger buildResults() without typing in a query and simply using the filters besides typing in an empty query and "searching" for items that fit the selected filter. I'm using the showSearch function and I added the search button into the AppBar of the page I'm trying to search on. Please let me know if I should provide anything else so you guys could help me out and find an alternative.

Here is a screenshot of the SearchBar:

Simulator Screen Shot - iPhone XR - 2019-01-18 at 11.12.25.png

Here is my code for my SearchDelegate:

class IssueSearchDelegate extends SearchDelegate {
  List<dynamic> issues;
  Repository repo;
  dynamic searchLabels = [];
  IssueSearchDelegate(BuildContext context, this.issues, this.repo);

  @override
    List<Widget> buildActions(BuildContext context) {
      return [
        IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            query = '';
            searchLabels = [];
          },
        ),
        IconButton(
          tooltip: "Filter",
          icon: const Icon(Icons.label),
          onPressed: () async {
            query = '';
            _getLabelSearch(context);
          }
        )
      ];
    }

  @override
    Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
    }

  @override
    Widget buildResults(BuildContext context) {
      List<Widget> results = [];
      if (query != '' && searchLabels.length == 0){
        for (int i = 0; i < issues.length; i++) {
          if (issues[i].runtimeType == Issue){
            Issue issue = issues[i];
            if (issue.title.toLowerCase().contains(query.toLowerCase()) || issue.number == int.tryParse(query)){
              results.add(IssueTile(issue, null));
            }
          }
        }
      }
      else {
        for (int i = 0; i < issues.length; i++) {
          if (issues[i].runtimeType == Issue){
            Issue issue = issues[i];
            if (issue.labels.length != 0){
              for (int j = 0; j < issue.labels.length; j++) {
                if (searchLabels.contains(issue.labels[j].id)) {
                  print('found');
                  results.add(IssueTile(issue, null));
                }
              }
            }
          }
        }
      }
      
      return ListView(
        children: results,
      );
    }

  @override
    Widget buildSuggestions(BuildContext context) {
      return Column();
    }

    void _getLabelSearch(BuildContext context) async {
      final items = <MultiSelectDialogItem<int>>[];
      List<Label> labels = repo.labels;
      for (int i = 0; i < labels.length; i++){
        items.add(MultiSelectDialogItem(i + 1, labels[i]));
      }

      final selectedValues = await showDialog<Set<int>>(
        context: context,
        builder: (BuildContext context) {
          return MultiSelectDialog( // edit the code to render it as a bunch of labels
            items: items
          );
        },
      );

      List<String> labelIds = [];
      if (selectedValues != null) {
        for (int i = 0; i < items.length; i++){
          if (selectedValues.contains(items[i].value)){
            labelIds.add(items[i].label.id);
          }
        }
      }
      
      searchLabels = labelIds;
      buildResults(context);

    }
      
}

Allan Mageto

unread,

Jan 21, 2019, 12:52:17 PM1/21/19

to Agnes Jang, Flutter Dev

Hey checkout RXdart

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Agnes Jang

unread,

Jan 23, 2019, 1:22:13 PM1/23/19

to Flutter Dev

Hi Allan,

Thanks for the reply! RXDart looks like it has a lot of functionality. However, I'm not sure that there's a filtering function in that repo. I saw the GitHub search example though. Could you point me to the filtering function if it's in there?

Reply all

Reply to author

Forward