Adjust selected value padding.

[boungly]

I want to adjust the padding for selectedValue as when we selected the value, the padding between label, selectedValue, underline are way too big.

[lcuis]

Hello @boungly ,

Thanks for reporting this issue.

Would you like to try with the following parameters to see if it works for you?

selectedValueWidgetFn: Function with parameter: item returning Widget to be used to display the selected value. underline: String|Widget|Function with parameter: value returning String|Widget displayed below the selected item or the hint if none.

An example is given with the use of those parameters here: https://github.com/icemanbsi/searchable_dropdown#Multi-custom-display-dialog

[boungly]

@lcuis thank you so much for this response <3 That helped me a lot.

[lcuis]

My pleasure @boungly !

I am glad you solved your issue!

[boungly]

@lcuis, But can we also adjust the padding for this?

[lcuis]

Indeed, a default padding of 10.0 is applied.

To work around this, you could use a -10.0 x translation as in the following example:

SearchableDropdown.multiple(
        items: items,
        selectedItems: selectedItems,
        onChanged: (value) {
          setState(() {
            selectedItems = value;
          });
        },
        selectedValueWidgetFn: (item) {
          return Container(
              transform: Matrix4.translationValues(-10,0,0),
              alignment: Alignment.centerLeft,
              child: (Text(item.toString())));
        },
        underline: Container(
          height: 1.0,
          padding: const EdgeInsets.all(0.0),
          margin: const EdgeInsets.all(0.0),
          decoration: BoxDecoration(
              border:Border(bottom: BorderSide(color: Colors.teal, width: 3.0))
          ),
        ),
        isExpanded: true,
      )

[lcuis]

Also, if you'd like to align the end of the underline with the end of the clear icon, you could also want to work around some values by using the margin and padding of the underline as follows for example:

SearchableDropdown.multiple(
        items: items,
        selectedItems: selectedItems,
        onChanged: (value) {
          setState(() {
            selectedItems = value;
          });
        },
        selectedValueWidgetFn: (item) {
          return Container(
              transform: Matrix4.translationValues(-10,0,0),
              alignment: Alignment.centerLeft,
              child: (Text(item.toString())));
        },
        underline: Container(
          height: 1.0,
          padding: const EdgeInsets.only(right: 13.0),
          margin: const EdgeInsets.only(right: 13.0),
          decoration: BoxDecoration(
              border:Border(bottom: BorderSide(color: Colors.teal, width: 3.0))
          ),
        ),
        isExpanded: true,
      )

[boungly]

I think that's all for me. Thank you so much ^^

[lcuis]

You're welcome @boungly , enjoy!

[abhihasabe]

Indeed, a default padding of 10.0 is applied.

To work around this, you could use a -10.0 x translation as in the following example:

SearchableDropdown.multiple(
        items: items,
        selectedItems: selectedItems,
        onChanged: (value) {
          setState(() {
            selectedItems = value;
          });
        },
        selectedValueWidgetFn: (item) {
          return Container(
              transform: Matrix4.translationValues(-10,0,0),
              alignment: Alignment.centerLeft,
              child: (Text(item.toString())));
        },
        underline: Container(
          height: 1.0,
          padding: const EdgeInsets.all(0.0),
          margin: const EdgeInsets.all(0.0),
          decoration: BoxDecoration(
              border:Border(bottom: BorderSide(color: Colors.teal, width: 3.0))
          ),
        ),
        isExpanded: true,
      )

Hello,

When i try to user given code we are getting error,

SearchableDropdown.multiple( items: _dropdownMenuItems, doneButton: Container(), disabledHint: "Select State*", selectedItems: selectedState, displayClearIcon: false, //hint: Text("Select State *"), searchHint: "Select State *", label: Text( "Select State *", style: TextStyle(color: Colors.black54), ), onChanged: (value) { setState(() { selectedState = value; }); if (selectedState.length > 0) getDealers(selectedState); }, closeButton: (selectedItems) { return ("Save"); }, selectedValueWidgetFn: (item) { return Container( transform: Matrix4.translationValues(-10, 0, 0), alignment: Alignment.centerLeft, child: (Text(item.toString()))); }, underline: Container( height: 1.0, decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black38, width: 1.0))), ), isExpanded: true, )

[darkrevenger]

Hello,

When i try to user given code we are getting error,

Hey, I did it by doing this. It seems that onChange triggers first so you can set the value of your variable there.

And this is the result:

This is the entire code of the widget and its container in case you need context. Hope it helps!

Card(
                elevation: 3,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(
                      Radius.circular(5.0),
                    ),
                  ),
                  child: SearchableDropdown.single(
                    iconEnabledColor: Colors.blue,
                    iconDisabledColor: Colors.blue,
                    displayClearIcon: false,
                    underline: Container(),
                    selectedValueWidgetFn: (t) {
                      return Container(
                          transform: Matrix4.translationValues(0,0,0),
                          alignment: Alignment.centerLeft,
                          child: (Text(paisModel.Descripcion)));
                    },
                    hint: "Pais *",
                    searchHint: "Pais *",
                    value: paisModel,
                    items: paises,
                    onChanged: (v) {
                      setState(() {
                        paisModel = v;
                        formarProvincias(v.PaisID);
                        changeFocus(provinciaIDFocusNode);
                      });
                    },
                    isExpanded: true,
                  ),
                ),
              ),