> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/widgets-13-or-dropdownbutton.md). # Widgets 13 | DropdownButton ![result](/files/-LXF2uxjWVz-ipbraXNT) ## Before Start Before starting our tutorial, I will create a page to contain our code. ```dart import "package:flutter/material.dart"; import 'package:flutter_widgets/const/_const.dart'; class DropDownButtonPage extends StatefulWidget { @override _DropDownButtonState createState() => _DropDownButtonState(); } class _DropDownButtonState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.DROP_DOWN_BUTTON), ), body: SingleChildScrollView( child: Column( children: [ //our code. SizedBox(height: 600) ], ), ), ); } } ``` It will show an empty page and I will put the code in the `children`. ![](/files/-LXDq7yLN377-OyCeKM4) ## Simple Use So let's look at our first simple about the `DropDownButton`. ```dart DropdownButton _normalDown() => DropdownButton( items: [ DropdownMenuItem( value: "1", child: Text( "First", ), ), DropdownMenuItem( value: "2", child: Text( "Second", ), ), ], onChanged: (value) { setState(() { _value = value; }); }, value: _value, ); ``` When we click the button, it will show you in the picture as below. It is very useful to our ![](/files/-LXDwy0O-QZgFN5fyfVf) ## Constructor As common, Let's look at the constructor of the `DropdownButton`. ```dart DropdownButton({ Key key, @required this.items, this.value, this.hint, this.disabledHint, @required this.onChanged, this.elevation = 8, this.style, this.iconSize = 24.0, this.isDense = false, this.isExpanded = false, }) ``` So let's look at the parameters step by step. ## items We have used this parameter above, but we don't really know it. When we see its definition, we know it is a list. ```dart final List> items; ``` Then we look at the constructor of the `DropdownMenuItem`. ```dart const DropdownMenuItem({ Key key, this.value, @required this.child, }) ``` You need to know that the `T` is a common class, usually, it is the type of your data. Such as `String`, `double`. The value will be this class same as the `T`. The child will show in the menu. It is a widget, I use a Text in the fore example. In this example, I will use a `Row` to show you. ```dart DropdownButton _itemDown() => DropdownButton( items: [ DropdownMenuItem( value: "1", child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Icon(Icons.build), SizedBox(width: 10), Text( "build", ), ], ), ), DropdownMenuItem( value: "2", child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Icon(Icons.settings), SizedBox(width: 10), Text( "Setting", ), ], ), ), ], onChanged: (value) { setState(() { _value = value; }); }, value: _value, isExpanded: true, ); ``` It will show you as follows. You should notice `isExpanded == true`. It will expand the menu. When you click it, it will show you the right one. ![](/files/-LXEn9JAzuZFYo7QnOTf) But you should care about that the \_value should be initiated with a valid value. In the above code, we have two choices, `1`, `2`. `var _value = "1";`If you set it to other value, such `_value ="3"`.It will occur such error. ```dart I/flutter ( 4147): 'package:flutter/src/material/dropdown.dart': Failed assertion: 'items == null || I/flutter ( 4147): value == null || items.where((DropdownMenuItem item) => item.value == value).length == 1': is not I/flutter ( 4147): true. ``` ## hint\&disabledHint If you do not set value, it will show a widget in the default state. Let's look at the code with not setting the `value` parameter. ```dart DropdownButton _hintDown() => DropdownButton( items: [ DropdownMenuItem( value: "1", child: Text( "First", ), ), DropdownMenuItem( value: "2", child: Text( "Second", ), ), ], onChanged: (value) { print("value: $value"); }, hint: Text( "Please select the number!", style: TextStyle( color: TEXT_BLACK, ), ), ); ``` It will show you like this. ![](/files/-LXErVyfTQ0qR7Vu5R-j) If we set `onChange` or `items` to null, I will show the **`disabledHint`**. ```dart DropdownButton _hint2Down() => DropdownButton( items: null, onChanged: null, disabledHint: Text("You can't select anything."), ); ``` ![](/files/-LXEsmMo29avo1yNjDz1) ## style In this part, I will give an example of many parameters, which are very easy to understand. These parameters are below. ```dart this.elevation = 8, this.style, this.iconSize = 24.0, this.isDense = false, ``` So let's look at the example. ```dart DropdownButton _normal2Down() => DropdownButton( items: [ DropdownMenuItem( value: "1", child: Text( "First", ), ), DropdownMenuItem( value: "2", child: Text( "Second", ), ), ], onChanged: (value) { setState(() { _value = value; }); }, value: _value, elevation: 2, style: TextStyle(color: PURPLE, fontSize: 30), isDense: true, iconSize: 40.0, ); ``` The `elevation` controls the shadow of the menu, we have used it so many time, so I will not tell this again in the other widgets. The `style` controls the Text in the menu. The `isDense` will reduce the height of the button. The `iconSize` controls the size of the triangle-arrow. The result is below. ![](/files/-LXF-yUyShdoV-91Q5Xd) ## Conclusion Today, we have learned the `DropdownButton`. It just jumps out a menu to select. It is easy to understand, but need care about the value must be in the range of values of the items. Thanks for your reading! The end. #### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. | Facebook Page | Twitter | GitHub | Medium | | ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- | | [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |