The Question sounds dumb,
but I cant figure out how to change the style of the selected Items
in the Multiselect dependency.
My Widget looks like this:
DropDownMultiSelect(
hintStyle: const TextStyle(color: Colors.black),
selectedValues: gewaehlteArten,
whenEmpty: "",
options: arten,
onChanged: (List<String> specificArten) {
setArten(arten: specificArten);
});
What can I do?
Here an additional picture:
I want to change the color to any other except of white ;)
DropDownMultiSelect has prop called menuItembuilder and use that and you can change style based on currently selected values
DropDownMultiSelect(
hintStyle: const TextStyle(color: Colors.black),
selectedValues: gewaehlteArten,
whenEmpty: "",
options: arten,
menuItembuilder: (option){
if(gewaehlteArten.contains(option) return YOUR_SELECTED_WIDGET;
return NORMAL_WIDGET;
},
onChanged: (List<String> specificArten) {
setArten(arten: specificArten);
});
You can also use childBuilder to make menu completely custom.
Related
I'm trying to implement the new Material 3 DropdownMenu in my application to replace the old DropdownButton, but I can't seem to find where to add the error and helper texts.
Back in the DropdownButtonFormField, they would go inside the decoration parameter. Example:
decoration: InputDecoration(
labelText: 'labelText',
errorText: 'errorMessage',
helperText: 'helperText',
),
I could find the style parameters for both helper and error texts in the DropdownMenu, but not the parameter for the text itself.
Am I missing something or this widget does not support those parameters?
This was my DropdownButton before:
DropdownButtonFormField<MyItem>(
value: _selectedItem,
decoration: const InputDecoration(
labelText: 'Salutation',
errorText: 'errorMessage',
helperText: 'helperText',
border: OutlineInputBorder(),
),
onChanged: _onChanged,
items: items.map((MyItem item) {
return DropdownMenuItem<MyItem>(
value: item,
child: Text(item.title),
);
}).toList(),
);
The expected result with the DropdownMenu is a similar, but with the lowered position of the items menu and the integrated search feature it has. Those were the main reasons for the change.
For anyone needing this in the future, I opened an issue in the Flutter repository and they replied that the parameters are missing and will potentially be added.
Here is the link for the issue.
I have stateless class contains form with 4 tabs and one of those tabs contains 3 dropdowns to select address on for country and based on value selected I want the second dropdown (which is for cities) to view its items.
all items for dropdowns comes from local sqlite database.
the problem is the second dropdown dose not view its items but when I use debugger I found the list comes from database successfully but the update of list value on stateless class not happen.
any way to solve this??
DropdownButtonFormField<Region>(
decoration: InputDecoration(
isDense: true,
floatingLabelBehavior:
FloatingLabelBehavior.auto,
labelStyle: TextStyle(fontSize: 22),
contentPadding:
EdgeInsets.symmetric(vertical: 9),
),
value: regionList.isEmpty
? region
: helRegion.getReg(
user.regionAdresse, regionList),
//icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
onChanged: (selectedRegion) {
onRegionSelected(context, user,
region, province, provinceList, selectedRegion);
},
items: regionList
.map((project) => DropdownMenuItem(
child: Text(project.Name),
value: project,
))
here is onRegionSelected function:
onRegionSelected(BuildContext context, User user, Region region, Province province, List<Province> provinceList, Region selectedRegion) async {try { showLoadingDialog(context);
final _provinceList = await getProvinceList(selectedRegion.id);
region = selectedRegion;
user.regionAdresse = selectedRegion.id;
province = null;
//provinceList.clear();
provinceList = _provinceList;
Navigator.pop(context);} catch (e) {
//TODO: handle error
rethrow; }}
First of all, you should use a stateful class so that when you select the first dropdown, the information that will appear in the second one is updated, and so on.
If your idea is to keep the format stateless, you could also save the responses from the DB in a stream and wrap the dropdowns in streamBuiler, so they could be updated when the new data pointed to by each dropdown is updated.
I'm leaving this as an answer since I don't have the reputation to add it as a comment.
I am having a multiple FormBuilder dropdown in my flutter app. all of them are dependent dropdown.
i want to implement something like this:
the first of the main parent dropdown value should be auto fill and hence all other are filled or selected depending on the parents selection.
I can see the text filled in all the dropdown but as it is the dependent it is disabled for first dropdown to be clicked once.
How to fix this issue?
in the below screenshot we can see that the data is filled or been selected in every dropdown but second dropdown is still been disabled. it only gets enabled after clicking or selecting the value in first dropdown. enter image description here
Here is my code for first dropdown
padding: const EdgeInsets.all(12.0),
child: FormBuilderDropdown(
name: 'City',
decoration: InputDecoration(
labelText: 'City',
),
allowClear: true,
hint: Text(widget.callLocationModel.CityName),
initialValue: citySelected,
validator: FormBuilderValidators.compose(
[FormBuilderValidators.required(context)]),
items: cityList
.map((citySelected) => DropdownMenuItem(
value: cityChoosen,
child:new Text('$citySelected'),
))
.toList(),
onChanged: (String value){
setState(() {
citySelected= value;
//this fuction calls my second dropdown depending on first dropdown value selection
fetchSite(citySelected);
});
},
),
),
I assume all this layout is done in a stageful widget, which has a variable in it’s state for each selected value (when it’s selected). You may override initState member function and set the initial values there, so when the widget is built for the first time it will have those values preselected.
I am using drop down search to fetch and display the list of items from firebase but I am getting a form field box by default with this widget. I wan't to remove this as it is not matching with my UI can anyone help me in this.
Widget I used is https://pub.dev/packages/dropdown_search
I am talking about the box that appears in this.
If you suggest me to use another widget then please also tell how to enable search oprtion in the same
If you want to remove border around dropdown element, set dropdownSearchDecoration to InputDecoration(border: InputBorder.none):
DropdownSearch<String>(
dropdownSearchDecoration: InputDecoration(border: InputBorder.none),
// ...
)
The DropdownSearch widget border have its default input border style. To remove, we need to overwrite it with our own inputBorder by setting the border to InputBorder.none.
Code
DropdownSearch<String>(
enabled: true,
items: yourList,
dropdownDecoratorProps: const DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(border:InputBorder.none),
),
onChanged: (myVal) {},
selectedItem: yourOwnSetValue
)
dropdownDecoratorProps: DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(border: InputBorder.none),
),
For example, in a TextField it is possible to set an InputDecoration with a label text, that shows in the center of the TextField when there is no user input, and then shows above the user's input text afterward.
With a DropDownButton I can only seem to get the hint text to display before the user makes a selection, and then it disappears and only displays the user's selection. Is there a way to mimic the TextField's behavior?
Thanks!
You can achieve that using DropDownButtonFormField widget instead of DropDownButton. DropDownButtonFormField has decoration property which lets you use labelText which goes over the top of the field after selecting an item from the list. Sample working code below:
return DropdownButtonFormField<String>(
decoration: InputDecoration(
labelText: 'select option'
),
value: selected,
items: ["A", "B", "C"]
.map((label) => DropdownMenuItem(
child: Text(label),
value: label,
))
.toList(),
onChanged: (value) {
setState(() => selected = value);
},
);
Output:
Hope this answers your question.