I want to Customise DropDownButton
, so that it does not render the content of DropdownItem
. Instead it should render my Custom layout/widget before and after selecting an item from DropDown.
In simple Words, I want to customise my DropDownButton
.
Thanks,
You can use DecoratedBox() to apply decoration on DropdownButton() widget. DecoratedBox provides all necessary parameters to customize the style of any kind of widget.
Step 1: Add a variable called dropdownValue that holds the currently selected item. Step 2: Add the DropdownButton widget to your page. Step 3: Inside the DropdownButton, add the value parameter and assign the dropdownValue that we created in step 1.
How to render DropdownButton
items differently when it is dropped down?
I found a solution through DropdownMenuItem
. Its build()
is executed separately for closed and dropped down state. You can use the context to find out if it is closed or dropped down state. e.g you can check for an ancestor stateful widget.
I use something like this dummy code fragment:
DropdownButton<String>(
value: selectedItem.id,
items: items.map((item) {
return DropdownMenuItem<String>(
value: item.id,
child: Builder(builder: (BuildContext context) {
final bool isDropDown = context.ancestorStateOfType(TypeMatcher<PageState>()) == null;
if (isDropDown) {
return Text(item.name);
} else {
return Text(item.name, style: TextStyle(color: Colors.red));
}
},)
);
}).toList(),
);
Where items is a list of id-name instances, and PageState is the state of my own stateful widget.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With