> 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) | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://flutteropen.gitbook.io/flutter-widgets/widgets-13-or-dropdownbutton.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.