I want my dropDownButton to show the DropDownmenu for selection as soon as the user navigates to the page(instead of manually having to click the button). How can I achieve this ?
My DropDown button
DropdownButton<String>(
isDense: true,
isExpanded: true,
value: _currentlySelected,
onChanged: (String newValue) {
setState(() {
_currentlySelected = newValue;
});
},
items: items.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
Related
How to not show the selected item in the dropdown?
I m using DropdownButtonHideUnderline package in flutter to implement a dropdown but i don't want to show the selected item on the top.And i just need the selected item in a variable .How to do this?
Please help..
DropdownButtonHideUnderline(
child: DropdownButton2(
// Initial Value
value: dropdownValue,
// Down Arrow Icon
icon: const Icon(
Icons.more_vert,
color: Colors.white,
),
// Array list of items
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(
items,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
),
);
}).toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
))
here you change the selected value:
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
}
by removing
setState(() {
dropdownValue = newValue!;
});
your dropdown will not change.
and you can use the chosen value by
onChanged: (String? newValue) => doSomething(newValue),
Future<void> doSomething(String? value) async {
...
}
You can ignore setting value on onChanged,
here, remove this, this is used to update the value on dropdownButton
.
onChanged: (String? newValue) {
// setState(() {
// dropdownValue = newValue!;
// });
},
I try to make a dropdown taking data from firestore, after selecting the items from DromdownMenuItem the selected new value cannot display please help..?
DropdownButtonHideUnderline(
child: DropdownButton<String>(
isDense: true,
//isExpanded: false,
value: projectName,
onChanged: (String? newValue) {
debugPrint('selected onchange: $newValue');
setState(
() {
debugPrint('make selected: $newValue');
projectName = newValue.toString();
state.didChange(newValue);
setDefaultMake = false;
///var setDefaultMakeModel = true;
controllerProjectName.text = newValue.toString();
},
);
},
items: snapshot.data!.docs.map((value) {
return DropdownMenuItem<String>(
value: value.get('project_name'),
child: Text('${value.get('project_name')}'),
);
}).toList(),
),
),
DropdownButton(
value: dropDownValue1,
onChanged: (String? newValue) {
setState(() {
dropDownValue1 = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
how to increase space between the arrow and the text
I hope I can make it be like this, how to do it?
Thanks in advance
Just add isExpanded: true, under the dropdown for expanding icon
DropdownButton(
isExpanded: true, // here need to change
value: dropDownValue1,
onChanged: (String? newValue) {
setState(() {
dropDownValue1 = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
Output:
Try below code hope its helpful to you. refer my answer here also
Declare one variable for dropdown:
var dropdownValue = 'Work At Office';
Your widget
InputDecorator(
decoration: const InputDecoration(border: OutlineInputBorder()),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
isDense: true,
isExpanded: true,
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
'Work At Office',
'Work From Home',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
I have this Dropdown:
DropdownButtonFormField(
value: shipmentSelected,
hint: Text(
'choose one',
),
onChanged: (value){
shipmentSelected = value;
}
items: product.shipment.map((Shipment shipment) {
return DropdownMenuItem(
value: shipment.code,
child: Text(
shipment.code,
),
);
}).toList(),
)
But it doesn't show any item... just show the hintText. How to fix it?
You need to pass a callback function to onChanged in the DropdownButtonFormField constructor. Update shipmentSelected and rebuild from this function like so:
onChanged: (value) {
setState(() {
shipmentSelected = value;
});
},
How to change Dropdown arrow color?
Here is what I want:
This is what I get
My widget:
DropdownButtonHideUnderline (
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
I tried wrapping with Theme and changing Brightness, but it changes arrow from White to Black only. I want to use some other color.
This can be done with icon: property in DropdownButton
DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
hint: Text('Select'),
icon: Icon( // Add this
Icons.arrow_drop_down, // Add this
color: Colors.blue, // Add this
),
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Thanks to #anmol.majhail, anyway found something simpler using iconEnabledColor property.
DropdownButtonHideUnderline (
child: DropdownButton<String>(
iconEnabledColor: Colors.indigo, // game changer
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),