How to Create a Dropdown in Flutter

A dropdown widget is a common UI element in Flutter used to display a list of options that a user can select. Typically used in forms, settings, and other input screens, the dropdown widget allows users to choose one option from a list. In Flutter, you can easily create a dropdown using the DropdownButton widget.

What is a Dropdown in Flutter?

The DropdownButton widget in Flutter displays a button that, when pressed, reveals a list of items for the user to choose from. You can customize the dropdown’s appearance using properties like icon, iconSize, style, and isExpanded. This flexibility makes it ideal for creating user-friendly forms and settings screens.

Code Example: Creating a Dropdown in Flutter


 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  String dropdownValue = 'Item 1';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown List Example'),
        ),
        body: Center(
          child: DropdownButton(
            value: dropdownValue,
            onChanged: (newValue) {
              // setState(() {
              //   dropdownValue = newValue;
              // });
              dropdownValue = newValue!;
              print(dropdownValue);
            },
            items: items.map>((String value) {
              return DropdownMenuItem(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

Explanation of the Code

In the code above, we are creating a simple Flutter app that displays a dropdown button. Here’s a step-by-step breakdown of how it works:

  1. Initialize the List of Items: We start by defining a list of String items (items), which represent the dropdown options. The dropdownValue variable is initialized with a default selection.

  2. Create the DropdownButton Widget: The DropdownButton widget is used to display the dropdown. The value parameter is assigned to dropdownValue, and the onChanged callback updates the dropdownValue whenever the user selects a new option. This ensures that the dropdown reflects the user’s current selection.

  3. Mapping the Items List: The items property requires a list of DropdownMenuItem widgets. We map each string in the items list to a DropdownMenuItem, passing value to each one. This allows Flutter to generate a list of dropdown options.

  4. Customization: You can further customize the dropdown by adding properties like icon to change the dropdown icon, iconSize to adjust the icon size, and isExpanded to control whether the dropdown takes the full width of its container.

Benefits of Using Dropdown in Flutter

Using dropdown widgets enhances the usability of your app by making forms and settings screens more interactive and user-friendly. The DropdownButton widget in Flutter is highly customizable and easy to implement, making it an essential tool for creating intuitive app interfaces.

By following this guide, you can quickly add a functional dropdown to your Flutter app, providing a clean and professional look while keeping your UI responsive and interactive.