5

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,

Hameed Syed
  • 3,939
  • 2
  • 21
  • 31
Kyaw Tun
  • 12,447
  • 10
  • 56
  • 83
  • Checking how Dropdown is implemented, I think you will need to edit in the source implementation in order to do that as it checks if value=null or else value takes the item value and not a subset of it. – Shady Aziza Feb 28 '18 at 09:00
  • Can you be a little more clear about what you are trying to achive? – Hemanth Raj Feb 28 '18 at 10:47
  • @HemanthRaj making dropdown value customization rather than reflecting the choice (choosing A will make dropdownButton value = A, what about if I choose A, the dropdownButton value = B instead) – Shady Aziza Feb 28 '18 at 11:26

1 Answers1

6

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.

Dmitriy
  • 5,525
  • 12
  • 25
  • 38
bdi
  • 191
  • 2
  • 6
  • so this works. the issue I'm having is getting the dropdown width to expand where the dropdown items ares larger than the button... – zack Jun 05 '19 at 13:04