A drop-down button creates a nice overlay on the screen providing multiple options to choose from. It is fairly simple to implement a drop down box or drop down button in flutter, thanks to the amazing flutter team.
Flutter provides an out of the box widget, **DropdownButton, **to create a drop down button which can be placed anywhere in your app just like any other button.
*Here is a quick illustration of a drop down button in flutter:*
![](../../../Uploads/ad3b097c-63db-4c1a-ab26-c083a01bfa35.gifwidth="50%height="auto](
**Key Aspects:****1. **The **DropdownButton** widget takes a List of type **DropdownMenuItem. **In the above illustration, we have 4 DropdownMenuItem widgets.**2. DropdownMenuItem **is one single item in the overlay/drop-down menu. It takes a *value and a child widget as arguments*. The child widget contains the actual widget that is displayed as an item of drop down. On the other hand, value contains the underlying value that the button generates.**3. **Finally,** onChanged **property of the DropdownButton takes a function that triggers every time a value is selected or changed.
*The following code snippet will add a drop down button similar to the one shown in the illustration.**
*color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( debugShowCheckedModeBanner: color: #569cd6;](false, title: color: #ce9178;]('Drop down Demo', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Drop Down Box Demo'), ); }}
color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](@override color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState();}
color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](String _dropDownButtonValue = color: #ce9178;]('No Value Chosen'; color: #6a9955;](//initial value that is displayed before any option is chosen from drop down
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar(title: color: #4ec9b0;](Text(widget.title), actions: []), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](Text( _dropDownButtonValue, ), color: #4ec9b0;](SizedBox( height: color: #b5cea8;](50, ), color: #4ec9b0;](DropdownButton( focusColor: color: #4ec9b0;](Colors.blue, hint: color: #4ec9b0;](Text(color: #ce9178;]('Drop Down Button'), color: rgb(106, 153, 85);](//text shown on the button (optional) elevation: color: #b5cea8;](3, items: [color: #ce9178;]('Dart', color: #ce9178;]('Python', color: #ce9178;]('Javascript', color: #ce9178;]('C++'] .color: #dcdcaa;](map((color: #4ec9b0;](String val) => color: #4ec9b0;](DropdownMenuItem( value: val, child: color: #4ec9b0;](Text(val), )) .color: #dcdcaa;](toList(), onChanged: (value) { color: #dcdcaa;](setState(() { _dropDownButtonValue = value; }); }, ) ], ), ), ); }}
*
**Here, the List of Strings map each String value to a DropdownMenuItem.**
**That was all for a drop down button in flutter. **
**Thank You!**
**Keep fluttering :)*