Customize future search order and filter icons about search_choices HOT 10 CLOSED

Hi @agustin-garcia ,

Thank you very much for your message!

I am not familiar with this icon. Is it possible that it doesn't come from the search_choices plugin?

Here are the icons from the plugin:

Some of those icons can easily be customized while for some others, it would require some additional custom code.

However, this list doesn't seem to contain the icon in your screenshot. Sorry about that.

Do you have some code you can share with me so that I can try to find the reason for this icon to appear?

from search_choices.

Hi @Icuis,
Thanks much for the prompt response, this is the icon that whe pressed, by default calls the "futureSearchFn" function, hence I'd say is internally defined into SearchOptions

Thanks again

from search_choices.

Hi @agustin-garcia ,

Thanks for the clarification.

If this is the icon clicked to perform the search, the icon is Icons.search as defined in either one of those lines depending on whether the language in use is RTL or not:

They can be changed with the help of the searchInputDecoration parameter which by default takes the following form:

InputDecoration(
      prefixIcon: Icon(
        Icons.search,
        size: 24,
      ),
      contentPadding: EdgeInsets.symmetric(vertical: 12),
    )

I hope this will solve your issue.

from search_choices.

Hi again,
Thanks again for you prompt response and sorry because I haven't been able to explain myself.

By following the "Single dialog paged future" example, what I'm trying to modify is the icon encircled in red.

I tried your suggestion, but it does insert an icon inside the actual TextField component.

I'm adding an extract of the code from your "Single dialog paged future" example:

SearchChoices.single( value: selectedValueSingleDialogPagedFuture, hint: kIsWeb ? "Example not for web" : "Select one capital", searchHint: "Search capitals", onChanged: kIsWeb ? null : (value) { setState(() { selectedValueSingleDialogPagedFuture = value; }); }, isExpanded: true, itemsPerPage: 10, currentPage: currentPage, selectedValueWidgetFn: (item) { return (...); }, futureSearchFn: (String? keyword, String? orderBy, bool? orderAsc, List<Tuple2<String, String>>? filters, int? pageNb) async { String filtersString = ""; int i = 1; filters?.forEach((element) { ... }); ... return (Tuple2<List<DropdownMenuItem>, int>(results, nbResults)); }, futureSearchOrderOptions: { .. }, futureSearchFilterOptions: { "continent": const { "icon": Text("Continent"), "exclusive": true, "values": [ ... ] }, "population": { "icon": Wrap(children: const [Icon(Icons.people), Text("Population")]), ... }, }, closeButton: (selectedItemsDone, doneContext) { return Row( ... ); }, )

from search_choices.

Oh, I see now. Sorry, I misunderstood earlier.

These are the future search filter buttons as defined here:

Sadly, those cannot easily be customized at the moment. Sorry about that.

Here are the options I see:

1. Wait for someone (maybe me) to implement this flexibility.
2. Propose a PR to implement this flexibility.
3. Inherit and change this part of the code.

from search_choices.

Excellent, I'm glad we are aligned now.
I'll try to do it by myself.

I'm very grateful for your time and explanation.
I'll make sure to get a cup of coffee for you guys, for this wonderful job you've done here.

from search_choices.

Thanks a lot for your message and the coffee, that's very sweet of you!

Don't hesitate to reach for help here. I'll be more than happy to assist if I can.

from search_choices.

Hello @agustin-garcia ,

Release 2.2.3 of the plugin now contains an example use of the new buildFutureFilterOrOrderButton parameter within example Single dialog paged future delayed. This parameter allows the customization of the future filter and order icons. A simpler example can be found below:

        buildFutureFilterOrOrderButton: ({
          required BuildContext context,
          required bool filter,
          required Function onPressed,
          int? nbFilters,
          bool? orderAsc,
          String? orderBy,
        }) {
            return (SizedBox(
              height: 25,
              width: 48,
              child: (ElevatedButton(
                child: Icon(
                  filter?Icons.filter_alt:Icons.sort_by_alpha
                ),
                onPressed: () {
                  onPressed();
                },
              )),
            ));
        },

Providing this result:

I hope you will find this useful.

from search_choices.

Hi @lcuis,
Sorry for the late response, I just tried and effectively I can select a different set of Icons which allows me to give more context to the user.
Thanks so much for the effort and the follow up.

Keep up with the good work :-)

from search_choices.

Hi @agustin-garcia ,

No worries for the delay.

Thank you very much for your confirmation and your message!

from search_choices.