Flutter – DropDownButton Widget

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.

Flutter DropDownButton Constructor:

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.

Properties of DropDownButton:

• 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!