CODEWITHSUNDEEP
androidflutterdart
Ross
Ross

Reputation: 2417

Flutter, change the style of the expanded dropdown menu from the drop down box

I have a a dropdown widget that contains a list of 5 date ranges. The shape theme of the application in rounded edges, however the menu that is show when the user clicks on the dropdown button has sharp corners. How do I style the Expanded dropdown items box.

In the screenshot snippets bellow, I want to move the expanded menu down below the button, and round the corners.

Code: 

child: DropdownButtonHideUnderline(
  child: DropdownButton(
    items: _dropdownValues.map((value) => DropdownMenuItem(
      child: Text(
        value,
        style: TextStyle(
          color: Colors.black87,
          fontWeight: FontWeight.bold,
          fontSize: MediaQuery.of(context).size.width * 0.04,
        ),
      ),
      value: value)
    ).toList(),
    onChanged: (String value) {
      setState(() {
        _currentlySelected = value;
      });
    },
    isExpanded: false,
    value: _currentlySelected,
  )
)

Dropdown Collapsed:

enter image description here

Dropdown Expanded:

enter image description here

Upvotes: 1

Views: 1188

Answers (1)

MattyBoy
MattyBoy

Reputation: 25

DropdownButton has a property called borderRadius. There is not a way to control the location of the popup menu from the built in DropdownButton.

child: DropdownButtonHideUnderline(
  child: DropdownButton(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    items: _dropdownValues.map((value) => DropdownMenuItem(
      child: Text(
        value,
        style: TextStyle(
          color: Colors.black87,
          fontWeight: FontWeight.bold,
          fontSize: MediaQuery.of(context).size.width * 0.04,
        ),
      ),
      value: value)
    ).toList(),
    onChanged: (String value) {
      setState(() {
        _currentlySelected = value;
      });
    },
    isExpanded: false,
    value: _currentlySelected,
  )
)

Upvotes: 2

Related Questions