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 theonChangedCallbackmethod in order to change the items in the dropdown. Also consider, thatvaluehas to be an item invalues.
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.