Flutter - DropDownButton Widget
Last Updated :
18 Apr, 2025
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.
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.
DropdownButton<String> DropdownButton({
Key? key,
required List<DropdownMenuItem<String>>? items,
List<Widget> Function(BuildContext)? selectedItemBuilder,
String? value,
Widget? hint,
Widget? disabledHint,
required void Function(String?)? onChanged,
void Function()? 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,
double? menuWidth,
Color? focusColor,
FocusNode? focusNode,
bool autofocus = false,
Color? dropdownColor,
double? menuMaxHeight,
bool? enableFeedback,
AlignmentGeometry alignment = AlignmentDirectional.centerStart,
BorderRadius? borderRadius,
EdgeInsetsGeometry? padding,
})
Property | Description |
---|
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. |
---|
main.dart:
main.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("GFG DropDownButton"),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
body: Center(
child: 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:
Similar Reads
Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan
3 min read
Flutter - AppBar Widget AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of the
8 min read
Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
8 min read
Flutter - Stateful vs Stateless Widgets The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive dire
6 min read