How to create a drop down button in flutter

<p>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. <em>Here is a quick illustration of a drop down button in flutter:</em></p> <p _dropDownButtonValue="value;">![](../../../Uploads/ad3b097c-63db-4c1a-ab26-c083a01bfa35.gifwidth="50%height="auto]( **Key Aspects:****1. **The <strong>DropdownButton</strong> 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 <em>value and a child widget as arguments</em>. 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. <strong>Finally,</strong> onChanged *<em>property of the DropdownButton takes a function that triggers every time a value is selected or changed. <em>The following code snippet will add a drop down button similar to the one shown in the illustration.</em></em> *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(() ); }, ) ], ), ), ); }} * <strong>Here, the List of Strings map each String value to a DropdownMenuItem.</strong> **That was all for a drop down button in flutter. ** <strong>Thank You!</strong> *<em>Keep fluttering :)</em></p>