Flutter DropDownButton Widget (original) (raw)

Last Updated : 18 Apr, 2025

In this article, we will learn how to use a DropDownButton and learn various properties of it in flutter. We will use the Flutter DropDownButton widget to display a dropdown list in our application. So first let’s see what is DropDownButton.

In Flutter, A DropDownButton is a material design button. The DropDownButton is a widget that we can use to select one unique value from a set of values. It lets the user select one value from a number of items. The default value shows the currently selected value. We can even include a down arrow icon on the list. On clicking the DropDownButton it opens a list of items, from which the user can select the desired option.

**Constructor of DropDownButton

DropdownButton DropdownButton({
Key? key,
required List<DropdownMenuItem>? items,
List Function(BuildContext)? selectedItemBuilder,
String? value,
Widget? hint,
Widget? disabledHint,
required void Function(String?)? onChanged,
void Function()? 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,
})

**Properties of DropDownButton:

Property Description
**items We use this property to define various items that are to be defined in our dropdown menu/list. It is a list of items that users can select.
**value Value is the currently selected item.
**style We use the style property to style our text in the dropdown menu/list, like color, fontsize, fontweight, etc.
**alignment Alignment defines how the hint or selected item is positioned within the button.
**elevation We use elevation property to elevate the dropdown menu/list.
**icon This property is used to display an icon to the dropdown button.
**iconSize This property is used to define the size of the icon.
**iconDisabledColor This property is used to set icon color when the dropdown button is disabled.
**iconEnabledColor This property is used to set icon color when the dropdown button is enabled.
**dropdownColor This property is used to display the background color of the dropdown.
**isDense This property reduces the height of the button.
**isExpanded This property is used to expand the dropdown button to full width.
**selectedItemBuilder When the user selects an option from the dropdown list, it displays the option on the button. If we want to display some other text instead of the selected option on the button we will use selectedItemBuilder.
**hint We can display one of the options from the dropdown list on the button or we can set our desired text by default using the hint.
**disabledHint This property is used to display desired text when the dropdown button is disabled.

**Flutter DropDownButton Code:

**main.dart:

main.dart `

import 'package:flutter/material.dart';

void main() { runApp(const MyApp()); }

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter DropDownButton', theme: ThemeData(primarySwatch: Colors.green), home: const MyHomePage(), debugShowCheckedModeBanner: false, ); } }

class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key);

@override _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State { // Initial Selected Value String dropdownvalue = 'Item 1';

// List of items in our dropdown menu var items = [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5' ];

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("GFG DropDownButton"), backgroundColor: Colors.green, foregroundColor: Colors.white, ), body: Center( child: DropdownButton( // Initial Value value: dropdownvalue,

      // Down Arrow Icon
      icon: const Icon(Icons.keyboard_arrow_down),

      // Array list of items
      items:
          items.map((String items) {
            return DropdownMenuItem(value: items, child: Text(items));
          }).toList(),
      // After selecting the desired option,it will
      // change button value to selected value
      onChanged: (String? newValue) {
        setState(() {
          dropdownvalue = newValue!;
        });
      },
    ),
  ),
);

} }

`

**Output: