Clear button (again)

[divan]

trafficstars

Follow up on the previous issue: https://github.com/AhmedLSayed9/dropdown_button2/issues/98. Seems like proposed solution doesn't work anymore (can't see icon field in the latest version).

Generally there are two (quite different in handling) use cases for dropdowns – with required value and without. If value is not required, then it's really important to have an option to "clear" the value - set it to null. I believe this functionality should come out of the box for any dropdown widget.

Would it be hard to add the ability to clear the value with a trailing Close icon?

[AhmedLSayed9]

icon field is now under iconStyleData argument:

iconStyleData: IconStyleData(
  icon: selectedValue == null
      ? const Icon(
          Icons.arrow_forward_ios_outlined,
        )
      : IconButton(
          onPressed: () {
            setState(() {
              selectedValue = null;
            });
          },
          icon: const Icon(Icons.clear),
          splashRadius: 14,
          constraints: const BoxConstraints(minWidth: 0),
          padding: EdgeInsets.zero,
        ),
  iconSize: 18,
),

[divan]

@AhmedLSayed9 thanks. But what are you thoughts regarding adding this functionality to the plugin (probably even more relevant to the FormField version)?

[AhmedLSayed9]

Can you explain more what are you suggesting?

[divan]

@AhmedLSayed9 sure, I'm suggesting implementation of a clear button functionality in this package out of the box, so all users who want clear button don't have to reinvent the wheel and look for solution in closed issues.

For example it could be optional:

DropdownButton2<MyItemType>(
          hint: Text('Select Item'),
          items: items,
          value: selectedValue,
          withClearButton: true,
);

or shown automatically if value is required (in my fork of this package I use "required" attribute to determine if clear button should be shown).

Does it make sense to you?

[AhmedLSayed9]

I don't think implementing the clear functionality within the package is a good idea. That will limit how the clear button will appear to the user. What if we want to change the icon (i.e X or delete icon) or its color, we might want to implement the clear button as the first item in the menu instead of an icon at the button.

Also, implementing a clear button by your own is not a big deal imo as 1. we already changing the selected value by using setState inside onChanged and 2. adding an icon to a button is a known thing.

[AhmedLSayed9]

Alternatively, we can add an optional property such as clearIcon of type Widget that when passed, it'll appear if the selected value is not null. but there're some questions:

1. Will it appear instead of the arrow icon or next to it?
2. Will it appear when dropdown menu is open/close?
3. Say it appears instead of the icon property and in both open/close, then the user has to back to normal implementation if he wants to change that behavior?

[divan]

@AhmedLSayed9 good points. Yes, ability to redefine the clear icon seems very logical, but following 80/20 rules, 80% of users won't need custom icon and would prefer the most standard one, that is easily recognizable and familiar to users.

I took a liberty to search some popular web typeahead/dropdown packages. Here are some screenshots, and it also matches my experience.

Seems like both both options are popular:

1. having clear button next to dropdown icon
2. replacing dropdown icon with clear button

Some libraries seems to have dedicated properties for their dropdowns like "clearable", but it's hard to say how good this naming choice is.

One of the problems with not having an ability to clear value is that it usually discovered late. Typically you try a library/package to see if it fits your needs and decide to use. Add code in many places (some of my apps have like 50+ such dropdown fields), and most of the type you don't need clearing value – usually you selecting value and everything seems fine. But then you discover (or user discovers) that you literally have no way to clear the value. You can't just delete it with backspace key. So now the only options is to write additional code for clearing the value and the code itself larger than code for calling a dropdown. Or creating the whole new wrapper around it and refactor whole app.

Plus, your package is just fantastic (I tried bunch of other packages, and this is next level). Clear button seems to be one piece missing from being near perfect dropdown library ready to use for most needs.

[AhmedLSayed9]

I like the first option more (having clear button next to dropdown icon).

but I'm still skeptical about using withClearButton boolean over a clearIcon widget as we'll use one property in both cases anyway:

//1
withClearIcon: true,
//2
clearIcon: const Icon(Icons.clear),

Second option has the ability to change the icon/size/color. i.e: a default black color will not match if we've set a black color for the button. Also, it'll use iconSize property by default for matching its size with the other icon property.

Plus, your package is just fantastic (I tried bunch of other packages, and this is next level). Clear button seems to be one piece missing from being near perfect dropdown library ready to use for most needs.

Tbh, the big missing piece is writing some tests for the package 😛 I'm looking to do that too when I've the time.