How to create a Material Design Dropdown button in Flutter
Tags: programming, android, flutter, ios
Published: 2021-08-09 17:04:38

Hi there dev community,

I have a new widget for you to reuse.
![Dropdown button default](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/924g8418d4v3ih74n73v.png)
![Dropdown button clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u00w20i8ynityj9u6nal.png)
So I was searching for a good looking dropdown menu following the material design. After several changing processes I came up with the following code for a stateless widget to place in your shared folder.
Feel free to use it in your projects or adjust it for your own purposes. Below the code I will explain some design decitions.

> Please consider to call at least `setState(() {})` in the `onChangedCallback` method in order to change the items in the dropdown. Also consider, that `value` has to be an item in `values`.

## The material dropdown widget
``` dart
import 'package:flutter/material.dart';

class MaterialDropdownView extends StatelessWidget {
  final Function onChangedCallback;
  final String value;
  final Iterable<String> values;

  MaterialDropdownView(
      {required this.value,
      required this.values,
      required this.onChangedCallback});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        height: 40,
        padding: const EdgeInsets.only(left: 15.0, right: 10.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(32.0),
            border: Border.all()),
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
                value: this.value,
                items: this
                    .values
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                onChanged: (newValue) {
                  this.onChangedCallback(newValue);
                }),
          ),
        ),
      ),
    );
  }
}
```
## How to use it
``` dart
MaterialDropdownView(
                    onChangedCallback: (newValue) {
                      setState(() {});
                    },
                    value: 'item1',
                    values: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5'],
                  ),
```

##Design descisions

### Align
Align has to be separated from the Container in order to prevent the dropdown box filling the whole width available.

### MouseRegion
MouseRegion lets the user show the click cursor when he is hovering over the dropdown with a mouse. It is the parent of DropdownButtonHideUnderline to only show it when the area is clickable

### DropdownButtonHideUnderline
This widget removes the default Underline of a DropdownButton.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wtpvq02mzobtz4lx46j.png)
[Follow The Flutter Pioneers](https://dev.to/lucianojung) to not miss any following posts.
Are you interested in [joining this Group](https://dev.to/listings/collabs/wanted-flutter-blogger-on-dev-to-294c)?

Consider to **support the author** if you like his work and [gift him a sunny day](https://www.buymeacoffee.com/lucianojung).

###You may also like

{% link https://dev.to/theflutterpioneers/the-best-flutter-posts-for-beginners-you-may-have-missed-j2g %}

{% link https://dev.to/lucianojung/global-variable-access-in-flutter-3ijm %}

{% link https://dev.to/lucianojung/how-to-handle-a-scrollable-list-of-various-widgets-in-flutter-249n %}