如何制作颤振自定义下拉按钮？

Question

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,

Answer 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. eg 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.