Flutter – DropDownButton Widget

01 Jun, 2022
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.
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.
Syntax:
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,
Color focusColor, 
FocusNode focusNode, 
bool autofocus: false, 
Color dropdownColor
}
)
Flutter DropDownButton Code:
This is the main.dart file
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<MyHomePage> {     // 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("Geeksforgeeks"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            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:
Before clicking the dropdown button:
On clicking the drop-down button: The user can see select one unique option from several items.
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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android? Click here to head to a guide uniquely curated by our experts with the aim to make you industry-ready in no time!
sweetyty
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
ListView Class in Flutter
Flutter - Stack Widget
Dart Tutorial
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Checkbox Widget
Flutter - Stack Widget
Flutter - Search Bar