Adjust selected value padding. about searchable_dropdown HOT 10 OPEN

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

from searchable_dropdown.

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

from searchable_dropdown.

You're welcome @boungly , enjoy!

from searchable_dropdown.

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

from searchable_dropdown.

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

from searchable_dropdown.

My pleasure @boungly !

I am glad you solved your issue!

from searchable_dropdown.

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

from searchable_dropdown.

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

from searchable_dropdown.

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

from searchable_dropdown.

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

from searchable_dropdown.