Hi there dev community,

I have a new widget for you to reuse. Dropdown button default Dropdown button clicked 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

import 'package:flutter/material.dart';

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

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

  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
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                onChanged: (newValue) {

How to use it

                    onChangedCallback: (newValue) {
                      setState(() {});
                    value: 'item1',
                    values: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5'],

Design descisions


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


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

This widget removes the default Underline of a DropdownButton.

Alt Text Follow The Flutter Pioneers to not miss any following posts. Are you interested in joining this Group?

Consider to support the author if you like his work and gift him a sunny day.

You may also like

This post is also available on DEV.