How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter

Hello Guys How Are You all ? In This Tutorial We are going to learn How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter.

Many Times We need to give users to option or dropdown button to choose one option. So there we need to use dropdown button. For Example Choose Gender Button.

To make Dropdown Button we need to use DropdownButton Class. in this class we need to provide some value to key items. So Without Wasting Your Time Lets Start this Tutorial.

How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter

How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter?

  • First of All Import material.dart in your main.dart file.
import 'package:flutter/material.dart';
  • Then, Create void main and Define MyApp in your runApp.
void main() {
  runApp(MyApp());
}
  • Now, Create a class named MyApp extends with a Stateless widget. This is our main View class. and define
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DropDown Button Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("DropDown Button Example - FlutterCorner"),
          backgroundColor: Colors.black,
        ),
        body: DropDownList(),
      ),
    );
  }
}
  • Then, Make DropDownList StatefulWidget Class.
class DropDownList extends StatefulWidget {
  @override
  _DropDownListState createState() => _DropDownListState();
}

class _DropDownListState extends State<DropDownList> {

}
  • After That, let’s make a String variable with Default Value like below.
  String dropdownValue = 'First';
  • Now, Make DropdownButton class with key named value, onChanged and items.
  • Here value would be our final value that user choosen
  • onChanged will have setState. when user choose any item from dropdown it will assign final value.
  • items have a list of item that we want to open as dropdown.
       DropdownButton<String>(
            value: dropdownValue,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['First', 'Second', 'Third', 'Fourth']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          )
  • The result will be the following: ( I am used Raised Button So Your Result Would be Minor Different from my result ).
  • just Define dropdownValue where you want value from this Dropdown.
  • That’s It For How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter?

In DropdownButton…. you can face underline of your button. Want to remove this UnderLine ?

How to remove the underline from Flutter DropdownButton

  • Just Use empty container in underline property of DropdownButton class.
underline: Container(),

How to add a custom icon to Flutter DropdownButton

In some case We need to use diffrent icons for dropdown button. So here is trick to use cusom icon.

just Add Below Property to our DropdownButton widget.

         DropdownButton<String>(
            value: dropdownValue,
            underline: Container(),
            icon: Icon(Icons.arrow_downward),
            iconSize: 20.0, // can be changed, default: 24.0
            iconEnabledColor: Colors.red,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['First', 'Second', 'Third', 'Fourth']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          )
  • Here Is my main.dart full sourceCode for batter understanding.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DropDown Button Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("DropDown Button Example - FlutterCorner"),
          backgroundColor: Colors.black,
        ),
        body: DropDownList(),
      ),
    );
  }
}

class DropDownList extends StatefulWidget {
  @override
  _DropDownListState createState() => _DropDownListState();
}

class _DropDownListState extends State<DropDownList> {
  String dropdownValue = 'First';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          color: Colors.black,
          child: DropdownButton<String>(
            value: dropdownValue,
            underline: Container(),
            icon: Icon(Icons.arrow_downward),
            iconSize: 20.0, // can be changed, default: 24.0
            iconEnabledColor: Colors.red,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['First', 'Second', 'Third', 'Fourth']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

So Guys That’s It For How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Read How To Store And Get Data From Shared Preferences in Flutter.

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

1 thought on “How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter”

Leave a Comment