How to Customize Dropdown Button Using Dropdownbuttonformfield in Flutter?

In this tutorial, we are going to learn to Customize Dropdown Button Using Dropdownbuttonformfield in Flutter.

In Flutter, DropdownButtonFormField is a widget that provides a dropdown menu of items and allows users to select one item from the list.

Steps to Customize the DropdownButtonFormField in Flutter

• Step 1: Create a StatefulWidget class to manage the state of the dropdown.
• Step 2: Inside the StatefulWidget class, initialize the following:
  • A nullable String variable to store the selected value.
  • A List of options to be displayed in the dropdown.
• Step 3: In the build method of the StatefulWidget, wrap the DropdownButtonFormField with a Padding widget to add padding around it.
• Step 4: Customize the DropdownButtonFormField using the following properties:
  • value: Set the current selected value.
  • hint: Set a hint text to be displayed when no value is selected.
  • icon: Customize the dropdown icon using an Icon widget.
  • iconSize: Set the size of the dropdown icon.
  • elevation: Set the elevation value to make the dropdown appear raised.
  • style: Set the text style for the selected value.
  • decoration: Customize the decoration of the dropdown using InputDecoration.
    • labelText: Set a label for the dropdown.
    • border: Set the border style for the dropdown (e.g., OutlineInputBorder).
• Step 5: Set the onChanged callback to update the selected value when an option is selected.
• Step 6: Create a map function to convert the list of options to DropdownMenuItem widgets.
  • Inside the map function, create a DropdownMenuItem for each option, setting the value and child properties.
• Step 7: Call the toList() method on the map function to convert it to a list of DropdownMenuItem widgets.
• Step 8: Assign the list of DropdownMenuItem widgets to the items property of the DropdownButtonFormField.

By following these steps, you can customize the appearance and behavior of the DropdownButtonFormField according to your requirements.

Full Code – Customize Dropdown Button Using Dropdownbuttonformfield

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown Button FormField Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown Button FormField'),
        ),
        body: Center(
          child: CustomDropdownFormField(),
        ),
      ),
    );
  }
}

class CustomDropdownFormField extends StatefulWidget {
  @override
  _CustomDropdownFormFieldState createState() => _CustomDropdownFormFieldState();
}

class _CustomDropdownFormFieldState extends State<CustomDropdownFormField> {
  String? _selectedValue;
  final List<String> _options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: DropdownButtonFormField<String>(
        value: _selectedValue,
        hint: Text('Select an option'),
        icon: Icon(Icons.arrow_drop_down),
        iconSize: 24,
        elevation: 16,
        style: TextStyle(color: Colors.deepPurple),
        decoration: InputDecoration(
          labelText: 'Options',
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
        onChanged: (String? newValue) {
          setState(() {
            _selectedValue = newValue;
          });
        },
        items: _options.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    );
  }
}

In this example, we’ve customized the following aspects of the DropdownButtonFormField:

1. Padding: We’ve added some horizontal padding around the dropdown using Padding widget.
2. Hint Text: We’ve set a hint text using the hint property.
3. Icon: We’ve changed the dropdown icon to an Icons.arrow_drop_down icon and increased its size using the iconSize property.
4. Elevation: We’ve added an elevation of 16 to make the dropdown appear raised.
5. Text Style: We’ve changed the text style of the selected value using the style property.
6. Decoration: We’ve customized the decoration of the dropdown using the decoration property. In this case, we’ve added a label and an outline border with a radius of 10.

Output of Customize Dropdown Button Using Dropdownbuttonformfield

Related Reading:

• How to Implement Multi-layer Dropdown List in Flutter?
• How to Create a Drop-Down in Flutter?

End of Customize Dropdown Button Using Dropdownbuttonformfield

You can further customize the appearance by changing the values of these properties or adding additional widgets within the DropdownButtonFormField.

If you haven’t already installed Flutter, you can follow the official: Flutter Installation Guide. to set it up.