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.

Customize Dropdown Button Using Dropdownbuttonformfield in Flutter

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.
    • 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() {

class MyApp extends StatelessWidget {
  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 {
  _CustomDropdownFormFieldState createState() => _CustomDropdownFormFieldState();

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

  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:<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),

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

Customizing Dropdown Button Using Dropdownbuttonformfield in Flutter Output

Related Reading:

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.

Ambika Dulal

Ambika Dulal is a Flutter Developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.


UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion


App Override

New Plaza, Kathmandu