How to create a Material Design Dropdown button in Flutter

Luciano Jung — Mon, 09 Aug 2021 17:04:38 +0000

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.

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

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

Luciano Jung — Mon, 03 May 2021 06:50:17 +0000

While thinking about making a post for people just starting using flutter I realized, that there are already great tutorials on dev.to. So I decided to make a bestOf Flutter posts for beginners.

Just to be clear: None of the authors have offered me any consideration to be mentioned in this post. If an author doesn't want to be mentioned in this post or if you think a Flutter tutorial is missing, feel free to give me feedback in the comments below.

What is Flutter?

Before you're starting you may want to know what is Flutter and why should you use it? Gladly Dae Won Kim explaines it really good in his post Top 4 Why Flutter is the BEST. He also discusses some Cons of flutter and gives a brief introduction into the programming language dart (the programming language behind the flutter framework).

Top 4 Why Flutter is the BEST 🙌

Dae Won Kim ・ Apr 20 '21

#flutter #flutterdev #dart #firstpost

Installation

For the installation part. Flutter has a really good tutorial themselve. On Flutter.dev it's shown how to install Flutter on Windows, macOs, Linux or even Chrome OS:

[Getting started with Flutter](https://flutter.dev/docs/get-started/install)

Stateless- and Stateful Widgets

A basic concept in flutter each beginner has to understand is the difference between a Stateless- and a Stateful Widgets. Namita Shetty describes in her blogpost StatelessWidget and StatefulWidget in Flutter. short and crisp how they differ from each other and displays an example for each.

StatelessWidget and StatefulWidget in Flutter.

Codeitout ・ Nov 15 '20

#flutter #dart #widgets #beginners

Libraries

When you dive deeper into flutter you will find out, that you can get quite a lot of extensions for various situations. To show you some libraries you must now when starting flutter app development Enrico aka TheOtherDev/s made a really good post called Flutter essentials: get started with great libraries including examples for each package to illustrate its benefits.

Flutter essentials: get started with great libraries

TheOtherDev/s ・ Dec 9 '20

#flutter #dart #beginners

If you want to add the packages in your project Arbitrary made a post covering both ways doing this.

Using external packages in flutter

Arbitrary ・ Apr 29 '21

#flutter #dart

Screen Navigation

In the case your app has more than one screen you need to get started with navigation. Since I figured out a clean way in flutter to handle routing (using some online tutorials) I recommend reading my post Flutter - Next Level Navigation - Basics.

🦋Flutter - Next Level Navigation - Basics

Luciano Jung ・ Apr 4 '21

#flutter #dart #productivity #programming

First Project Ideas

If you're new to flutter and now are dying to start your first project Muhammad Ali made a post with 15 ideas for your first project. The post contains 15 videos for different apps programmed using flutter to get started with. In this post he shows 7 fundamental flutter packages and describes their purposes.

15 Flutter App IDEAS: BEGINNER TO EXPERT [WITH FREE TUTORIAL]

Muhammad Ali (Nerdjfpb) ・ Jul 5 '20

#android #ios #beginners #codenewbie

Thats all, thanks for reading :)
If you have a friend who wants to learn flutter just send him or her this post and noone can stop him joining the flutter community!

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 buy him a sushi roll.

Forem: The Flutter Pioneers

How to create a Material Design Dropdown button in Flutter

The material dropdown widget

How to use it

Design descisions

Align

MouseRegion

DropdownButtonHideUnderline

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 - Manage variables globally

Luciano Jung ・ Feb 10 '21

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

Luciano Jung ・ Jun 3 '21

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

What is Flutter?

Top 4 Why Flutter is the BEST 🙌

Dae Won Kim ・ Apr 20 '21

Installation

Stateless- and Stateful Widgets

StatelessWidget and StatefulWidget in Flutter.

Codeitout ・ Nov 15 '20

Libraries

Flutter essentials: get started with great libraries

TheOtherDev/s ・ Dec 9 '20

Using external packages in flutter

Arbitrary ・ Apr 29 '21

Screen Navigation

🦋Flutter - Next Level Navigation - Basics

Luciano Jung ・ Apr 4 '21

First Project Ideas

15 Flutter App IDEAS: BEGINNER TO EXPERT [WITH FREE TUTORIAL]

Muhammad Ali (Nerdjfpb) ・ Jul 5 '20