Flutter Dropdown Button Widget

Let’s make a basic dropdown button

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
title: "Tutorial",
home: Home(),
));

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter tutorial"),
),
body: Text(
"Hi",
),
);
}
}
Basic home screen preview
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
title: "Tutorial",
home: Home(),
));

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

int _value = 1;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dropdown Button"),
),
body: Container(
padding: EdgeInsets.all(20.0),
child: DropdownButton(
value: _value,
items: [
DropdownMenuItem(
child: Text("First Item"),
value: 1,
),
DropdownMenuItem(
child: Text("Second Item"),
value: 2,
),
DropdownMenuItem(
child: Text("Third Item"),
value: 3
),
DropdownMenuItem(
child: Text("Fourth Item"),
value: 4
)
],
onChanged: (value) {
setState(() {
_value = value;
});
}),
));
}
}
Basic dropdown button preview
Basic dropdown button list preview

Let’s get dropdown elements from a list

class ListItem {
int value;
String name;

ListItem(this.value, this.name);
}
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
title: "Tutorial",
home: Home(),
));

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

List<ListItem> _dropdownItems = [
ListItem(1, "First Value"),
ListItem(2, "Second Item"),
ListItem(3, "Third Item"),
ListItem(4, "Fourth Item")
];

List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
ListItem _selectedItem;

void initState() {
super.initState();
_dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
_selectedItem = _dropdownMenuItems[0].value;

}

List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {
List<DropdownMenuItem<ListItem>> items = List();
for (ListItem listItem in listItems) {
items.add(
DropdownMenuItem(
child: Text(listItem.name),
value: listItem,
),
);
}
return items;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dropdown Button"),
),
body: Container(
padding: EdgeInsets.all(20.0),
child: DropdownButton<ListItem>(
value: _selectedItem,
items: _dropdownMenuItems,
onChanged: (value) {
setState(() {
_selectedItem = value;
});
}),
),
);
}
}

Let’s Remove the underline of the DropdownButton

After removing the underline

Add some styling for dropdown button

After adding boarder and background colour
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dropdown Button"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.cyan,
border: Border.all()),
child: DropdownButtonHideUnderline(
child: DropdownButton(
value: _selectedItem,
items: _dropdownMenuItems,
onChanged: (value) {
setState(() {
_selectedItem = value;
});
}),
),
),
),
);
}

Technical Writer | Tech Enthusiast | Open source contributor