DEV Community

Cover image for How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter - fluttercorner.com
FlutterCorner
FlutterCorner

Posted on

How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter - fluttercorner.com

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?

First of All Import material.dart in your main.dart file.

import 'package:flutter/material.dart';
Enter fullscreen mode Exit fullscreen mode

Then, Create void main and Define MyApp in your runApp.

void main() {
  runApp(MyApp());
}
Enter fullscreen mode Exit fullscreen mode

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(),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Then, Make DropDownList StatefulWidget Class.

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

class _DropDownListState extends State<DropDownList> {

}
Enter fullscreen mode Exit fullscreen mode

After That, let’s make a String variable with Default Value like below.

  String dropdownValue = 'First';
Enter fullscreen mode Exit fullscreen mode

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(),
          )
Enter fullscreen mode Exit fullscreen mode

The result will be the following: ( I am used Raised Button So Your Result Would be Minor Different from my result ).

Full Article At Here How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter

Top comments (2)

Collapse
 
derrickthesmart profile image
Derrick Koko💻

Thanks...
The code worked perfectly...

Collapse
 
kwame_yeboah profile image
kwame_yeboah

Thanks your code helped notice an error in mine :)