Flutter DropdownButton Widget with Example

Flutter, the versatile cross-platform framework, offers a wide array of widgets to create engaging user interfaces. One such widget is the DropdownButton, which allows developers to incorporate interactive dropdown menus into their applications.

In this article, we will explore the DropdownButton widget in Flutter and provide a comprehensive example to demonstrate its usage and functionality.

Understanding the DropdownButton Widget

The DropdownButton widget in Flutter enables the creation of dropdown menus that allow users to choose from a list of options. Its versatility and ease of use make it a valuable tool for enhancing the user experience. Let’s delve into the key aspects of this widget.

Flutter DropdownButton Example:

 DropdownButton(
              value: drodownvalues,
              dropdownColor: Colors.green,
              icon: Icon(Icons.arrow_downward),
              elevation: 10,
              items: ["Menu one", "Menu two", "Menu Three", "Menu Four"]
                  .map((dynamic value) => DropdownMenuItem(
                        value: value,
                        child: Text(
                          value,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ))
                  .toList(),
              onChanged: (newmenu) {
                setState(() {
                  drodownvalues = newmenu!;
                });
              })

Flutter Drop Down Button Widget

Full tutorial source code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  dynamic drodownvalues = "Menu one";

  @override
  Widget build(BuildContext context) {
    //in this tutorial you can easily learn how to create dropdown menu using flutter.
    //let's started ....
    return Scaffold(
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          DropdownButton(
              value: drodownvalues,
              dropdownColor: Colors.green,
              icon: Icon(Icons.arrow_downward),
              elevation: 10,
              items: ["Menu one", "Menu two", "Menu Three", "Menu Four"]
                  .map((dynamic value) => DropdownMenuItem(
                        value: value,
                        child: Text(
                          value,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ))
                  .toList(),
              onChanged: (newmenu) {
                setState(() {
                  drodownvalues = newmenu!;
                });
              })
          // wow this is working ... thank you.
        ]),
      ),
    );
  }
}

Read Also, Flutter ListView Builder Example.

Conclusion:

The DropdownButton widget in Flutter is a versatile tool for creating interactive dropdown menus that significantly improve the user experience. By following the steps outlined in this article, you can easily incorporate this widget into your Flutter applications. Experiment with its various configurations and explore the additional options available to enhance its functionality. With the dropdown button widget, you can empower your users to make selections effortlessly, ultimately creating a more engaging and user-friendly application interface in Flutter. So why wait? Start implementing the DropdownButton widget today and take your Flutter development to the next level. Happy coding!