How to Create a Simple Dropdown in Flutter

If you’re new to Flutter and wondering how to create a dropdown menu to let users select an option from a list, you’re in the right place! In this beginner-friendly guide, we’ll show you how to use the DropdownButton widget to build a simple and stylish dropdown in Flutter.

Why Use DropdownButton in Flutter?

The DropdownButton widget is part of Flutter’s core widgets and is perfect for:

Choosing from a small set of values
Creating form fields
Making UI interactions smooth and intuitive

Explaination:

StatefulWidget: We use it to update the UI when the user selects a new item.
fruitList: A list of strings that appear in the dropdown.
selectedFruit: The currently selected value.
DropdownButton: The core widget that creates the dropdown UI.
Styling: We wrapped the dropdown in a styled Container for better visuals.

Full Code:

import 'package:flutter/material.dart';

class SimpleDropDown extends StatefulWidget {
  const SimpleDropDown({super.key});

  @override
  State<SimpleDropDown> createState() => _SimpleDropDownState();
}

class _SimpleDropDownState extends State<SimpleDropDown> {
  final fruitList = ["Apple", "Mango", "Banana"];
  String selectedFruit = "Apple";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
          child: Container(
            width: MediaQuery.of(context).size.width / 2,
            padding: const EdgeInsets.symmetric(horizontal: 12),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
            ),
            child: DropdownButton<String>(
              isExpanded: true,
              value: selectedFruit,
              underline: const SizedBox.shrink(),
              borderRadius: BorderRadius.circular(12),
              items: fruitList.map((fruits) {
                return DropdownMenuItem<String>(
                  value: fruits,
                  child: Text(fruits),
                );
              }).toList(),
              onChanged: (value) {
                if (value != null) {
                  setState(() {
                    selectedFruit = value;
                  });
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

Dart

Output:

Output Explaination:

A white rounded dropdown in the center of a grey screen
Initial selected value is “Apple”
On selecting another fruit, the value updates instantly

Conclusion:

Using DropdownButton in Flutter is a quick and efficient way to let users pick a value from a list. It’s perfect for building clean and user-friendly UIs. This example can be extended to use dynamic data, icons, or custom widgets inside each dropdown item.

Leave a Comment Cancel Reply