DEV Community

Cover image for How to create a Material Design Dropdown button in Flutter
Luciano Jung for The Flutter Pioneers

Posted on • Updated on

How to create a Material Design Dropdown button in Flutter

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;

  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);
                }),
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

How to use it

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

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
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

Top comments (0)