Comments (10)
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,
Hey, I did it by doing this. It seems that onChange triggers first so you can set the value of your variable there.
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.
Related Issues (20)
- Selcted value is not changes if I give preselected value HOT 6
- Search is not working when i use value as Id inside onChanged
- How to get the selected value not index in multiple?
- Search is not working when, I use value as Id Int inside Value DropdownMenuItem HOT 1
- Provide async call to API on typing search HOT 1
- null safety HOT 1
- Clear the selected value programatically
- Is it possible to reduce the popup size like height , width after dropdown is opened HOT 1
- selectedItems how to get values in string instead of id in numbers HOT 1
- When dropdown is clicked, UI should not get expanded, the items should display like normal dropdown effect HOT 1
- By default selected initial value HOT 1
- Add the ability to put hints in dialog search
- Need support for search delay (debounce) HOT 4
- Remove default padding HOT 2
- In multiple select option is not working properly
- Failed to build iOS app
- Compilation failed Flutter 2.5.0 HOT 7
- The getter 'subhead' isn't defined for the class 'TextTheme' - Cannot Debug/Run Flutter App HOT 13
- Can you update library to version 2 with null safty? HOT 1
- error HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from searchable_dropdown.