Flutterexperts

In this article, We will explain about The dropdown button in a flutter. A dropdown button is a material design button. So let’s apply a demo of the dropdown button in your flutter applications.

---

Table of Contents :

Flutter

Dropdown Button

Code Implementation

Code File

Conclusion

---

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”

Dropdown Button:

We use the Dropdown Button to display any Dropdown List item as we can change its style according to it. Such as its background color, border secular etc. As this Dropdown list because it is a clickable widget. Which shows the list item we have selected. The Dropdown Button has DropDownMenuItem. We initialize whatever is to be shown in the list. and the Dropdown button has a function named onChnaged. When a user clicks on an item from the dropdown. So it triggers and executes the triggered function.

Demo Module :

Code Implement :

Create a new dart file calledflutter_dropdown_button_demo inside the lib folder.

Have a Look at the code Implementation :

DropdownButton<String>(
  focusColor:Colors.white,
  value: _chosenValue,
  //elevation: 5,
  style: TextStyle(color: Colors.white),
  iconEnabledColor:Colors.black,
  items: <String>[
    'Android',
    'IOS',
    'Flutter',
    'Node',
    'Java',
    'Python',
    'PHP',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value,style:TextStyle(color:Colors.black),),
    );
  }).toList(),
  hint:Text(
    "Please choose a langauage",
    style: TextStyle(
        color: Colors.black,
        fontSize: 14,
        fontWeight: FontWeight.w500),
  ),
  onChanged: (String value) {
    setState(() {
      _chosenValue = value;
    });
  },
),

We have explained the Dropdown in this screen. We list items using the Dropdown Button. To show on the click of a button, in the Dropdown Button we have initialized some list items. Which is of string type. That will show us the item.

Seeing the screen above. There is a list showing in this screen, which will initialize the value of the DropdownMenuItemin the Dropdown Button and will show the click value on the click of its item in onChanged.

Code File :

import 'package:flutter/material.dart';

class DropDownDemo extends StatefulWidget {
  @override
  _DropDownDemoState createState() => _DropDownDemoState();
}

class _DropDownDemoState extends State<DropDownDemo> {
  String _chosenValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropDown'),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(0.0),
          child: DropdownButton<String>(
            value: _chosenValue,
            //elevation: 5,
            style: TextStyle(color: Colors.black),

            items: <String>[
              'Android',
              'IOS',
              'Flutter',
              'Node',
              'Java',
              'Python',
              'PHP',
            ].map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text(
              "Please choose a langauage",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.w600),
            ),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

Conclusion :

In this article, I have explained a Dropdown Button demo, you can modify and experiment according to your own, this little introduction was from the Dropdown Button from our side.

I hope this blog helps will provide you with sufficient information in Trying up the Dropdown Button demo in your flutter project. So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.