Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make flutter custom drop down button?

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,

like image 454
Kyaw Tun Avatar asked Feb 28 '18 07:02

Kyaw Tun


People also ask

How do I decorate the drop down menu in flutter?

You can use DecoratedBox() to apply decoration on DropdownButton() widget. DecoratedBox provides all necessary parameters to customize the style of any kind of widget.

How do you get the flutter drop down position?

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.


1 Answers

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.

like image 154
bdi Avatar answered Oct 01 '22 05:10

bdi