Customize future search order and filter icons

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

lcuis commented 1 year ago

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:

https://github.com/lcuis/search_choices/blob/a21e4f031cf828873101f7db9cf3b01076f2906c/lib/src/dropdown/dropdown_dialog.dart#L582

https://github.com/lcuis/search_choices/blob/a21e4f031cf828873101f7db9cf3b01076f2906c/lib/src/dropdown/dropdown_dialog.dart#L589

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.

agustin-garcia commented 1 year ago

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( ... ); }, )

lcuis commented 1 year ago

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

These are the future search filter buttons as defined here: https://github.com/lcuis/search_choices/blob/a21e4f031cf828873101f7db9cf3b01076f2906c/lib/src/dropdown/future_search_filter_options_widget.dart#L48-L67

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

Here are the options I see:

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

agustin-garcia commented 1 year ago

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.

lcuis commented 1 year ago

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.

lcuis commented 1 year ago

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.

agustin-garcia commented 1 year ago

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 :-)

lcuis commented 1 year ago

Hi @agustin-garcia ,

No worries for the delay.

Thank you very much for your confirmation and your message!

lcuis / search_choices

Customize future search order and filter icons #107

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