DropdownButton<T> class

A Material Design button for selecting from a list of items.

A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.

Updating to DropdownMenu

There is a Material 3 version of this component, DropdownMenu that is preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3). The DropdownMenu widget's visuals are a little bit different, see the Material 3 spec at m3.material.io/components/menus/guidelines for more details.

The DropdownMenu widget's API is also slightly different. To update from DropdownButton to DropdownMenu, you will need to make the following changes:

Instead of using DropdownButton.items, which takes a list of DropdownMenuItems, use DropdownMenu.dropdownMenuEntries, which takes a list of DropdownMenuEntry's.
Instead of using DropdownButton.onChanged, use DropdownMenu.onSelected, which is also a callback that is called when the user selects an entry.
In DropdownMenu it is not required to track the current selection in your app's state. So, instead of tracking the current selection in the DropdownButton.value property, you can set the DropdownMenu.initialSelection property to the item that should be selected before there is any user action.
You may also need to make changes to the styling of the DropdownMenu, see the properties in the DropdownMenu constructor for more details.

See the sample below for an example of migrating from DropdownButton to DropdownMenu.

Using DropdownButton

One ancestor must be a Material widget and typically this is provided by the app's Scaffold.

The type T is the type of the value that each dropdown item represents. All the entries in a given menu must represent values with consistent types. Typically, an enum is used. Each DropdownMenuItem in items must be specialized with that same type argument.

The onChanged callback should update a state variable that defines the dropdown's value. It should also call State.setState to rebuild the dropdown with the new value.

This sample shows a DropdownButton with a large arrow icon, purple text style, and bold purple underline, whose value is one of "One", "Two", "Three", or "Four".

To create a local project with this code sample, run:
flutter create --sample=material.DropdownButton.1 mysample

If the onChanged callback is null or the list of items is null then the dropdown button will be disabled, i.e. its arrow will be displayed in grey and it will not respond to input. A disabled button will display the disabledHint widget if it is non-null. However, if disabledHint is null and hint is non-null, the hint widget will instead be displayed.

This sample shows how you would rewrite the above DropdownButton to use the DropdownMenu.

To create a local project with this code sample, run:
flutter create --sample=material.DropdownButton.2 mysample

Constructors

DropdownButton({Key? key, required List<DropdownMenuItem<T>>? items, DropdownButtonBuilder? selectedItemBuilder, T? value, Widget? hint, Widget? disabledHint, required ValueChanged<T?>? onChanged, VoidCallback? onTap, int elevation = 8, TextStyle? style, Widget? underline, Widget? icon, Color? iconDisabledColor, Color? iconEnabledColor, double iconSize = 24.0, bool isDense = false, bool isExpanded = false, double? itemHeight = kMinInteractiveDimension, double? menuWidth, Color? focusColor, FocusNode? focusNode, bool autofocus = false, Color? dropdownColor, double? menuMaxHeight, bool? enableFeedback, AlignmentGeometry alignment = AlignmentDirectional.centerStart, BorderRadius? borderRadius, EdgeInsetsGeometry? padding}): Creates a dropdown button.

Properties

alignment → AlignmentGeometry: Defines how the hint or the selected item is positioned within the button.
final
autofocus → bool: True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
final
borderRadius → BorderRadius?: Defines the corner radii of the menu's rounded rectangle shape.
final
disabledHint → Widget?: A preferred placeholder widget that is displayed when the dropdown is disabled.
final
dropdownColor → Color?: The background color of the dropdown.
final
elevation → int: The z-coordinate at which to place the menu when open.
final
enableFeedback → bool?: Whether detected gestures should provide acoustic and/or haptic feedback.
final
focusColor → Color?: The color for the button's Material when it has the input focus.
final
focusNode → FocusNode?: An optional focus node to use as the focus node for this widget.
final
hashCode → int: The hash code for this object.
no setterinherited
hint → Widget?: A placeholder widget that is displayed by the dropdown button.
final
icon → Widget?: The widget to use for the drop-down button's icon.
final
iconDisabledColor → Color?: The color of any Icon descendant of icon if this button is disabled, i.e. if onChanged is null.
final
iconEnabledColor → Color?: The color of any Icon descendant of icon if this button is enabled, i.e. if onChanged is defined.
final
iconSize → double: The size to use for the drop-down button's down arrow icon button.
final
isDense → bool: Reduce the button's height.
final
isExpanded → bool: Set the dropdown's inner contents to horizontally fill its parent.
final
itemHeight → double?: If null, then the menu item heights will vary according to each menu item's intrinsic height.
final
items → List<DropdownMenuItem<T>>?: The list of items the user can select.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
menuMaxHeight → double?: The maximum height of the menu.
final
menuWidth → double?: The width of the menu.
final
onChanged → ValueChanged<T?>?: Called when the user selects an item.
final
onTap → VoidCallback?: Called when the dropdown button is tapped.
final
padding → EdgeInsetsGeometry?: Padding around the visible portion of the dropdown widget.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selectedItemBuilder → DropdownButtonBuilder?: A builder to customize the dropdown buttons corresponding to the DropdownMenuItems in items.
final
style → TextStyle?: The text style to use for text in the dropdown button and the dropdown menu that appears when you tap the button.
final
underline → Widget?: The widget to use for drawing the drop-down button's underline.
final
value → T?: The value of the currently selected DropdownMenuItem.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<DropdownButton<T>>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited