How to create a Material Design Dropdown button in Flutter

Hi there dev community,

I have a new widget for you to reuse.


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);
                }),
          ),
        ),
      ),
    );
  }
}

How to use it

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.

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

The best Flutter posts for beginners in 2021 you may have missed

Luciano Jung for The Flutter Pioneers ・ May 3 '21

#flutter #discuss #beginners #bestofdev

🦋Flutter - Manage variables globally

Luciano Jung ・ Feb 10 '21

#flutter #dart #bestpractices #programming

🦋How to handle a scrollable list of various widgets in Flutter

Luciano Jung ・ Jun 3 '21

#flutter #dart #tutorial #programming