# Widgets 13 | DropdownButton ![result](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXF-EzsJlLbbvA7CjY_%2F-LXF2uxjWVz-ipbraXNT%2Fdrop-down-button-07.png?alt=media\&token=c14fcdfa-f0a9-4001-aa2f-2c999ff40fab) ## 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`. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXDnueDzgBu8KNZcBfA%2F-LXDq7yLN377-OyCeKM4%2Fdrop-down-button-01.png?alt=media\&token=724d565c-871a-4031-989b-6dceadbf3e15) ## 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 ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXDnueDzgBu8KNZcBfA%2F-LXDwy0O-QZgFN5fyfVf%2Fdrop-down-button-02.png?alt=media\&token=4c02f783-06be-430e-bdea-e862b0a45701) ## 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. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXDnueDzgBu8KNZcBfA%2F-LXEn9JAzuZFYo7QnOTf%2Fdrop-down-button-03.png?alt=media\&token=a51b0dd2-edb5-4a44-b8f0-7e5391614580) 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. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXDnueDzgBu8KNZcBfA%2F-LXErVyfTQ0qR7Vu5R-j%2Fdrop-down-button-04.png?alt=media\&token=9a4df635-059f-449f-a160-a64b2b513717) 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."), ); ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXDnueDzgBu8KNZcBfA%2F-LXEsmMo29avo1yNjDz1%2Fdrop-down-button-05.png?alt=media\&token=bfd2529a-27c8-4dec-baaa-0b32e15c3ee9) ## 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. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LXF-EzsJlLbbvA7CjY_%2F-LXF-yUyShdoV-91Q5Xd%2Fdrop-down-button-06.png?alt=media\&token=8b98a6de-dbcd-466c-9149-5cb2d0247f03) ## 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) |