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';

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 ).

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

Comments

[Derrick Koko💻]

Thanks...
The code worked perfectly...

[kwame_yeboah]

Thanks your code helped notice an error in mine :)