Blog

This is a flutter dropdown example. Through Dropdowns we can select one or more items. Dropdowns normally occupy a smaller space than other type of widgets which display lists of data like gridview and listview.

This example doesn't require any dependency.

(a). main.dart

This is the only file you are required to create in this project.

Start by adding imports:

import 'package:flutter/material.dart';

That material.dart gives us access to several flutter material design components to use including dropdown.

Create the MyAppState, extending the state class. The MyApp is a custom StatefulWidget for which the state is being created.

class MyAppState extends State<MyApp> {

Inside this class define the list of items that will be rendered in the dropdown:

  List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];

Then add two more instance fields including a List of dropdown menu items and a string to hold the selected item:

  List<DropdownMenuItem<String>> _dropDownMenuItems;
  String _selectedFruit;

Then override the initState() class:

  @override
  void initState() {
    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
    _selectedFruit = _dropDownMenuItems[0].value;
    super.initState();
  }

Here is the method to build and get the dropdown menu items:

  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
    List<DropdownMenuItem<String>> items = new List();
    for (String fruit in fruits) {
      items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
    }
    return items;
  }

Here is the method to change the dropdown items:

    void changedDropDownItem(String selectedFruit) {
    setState(() {
      _selectedFruit = selectedFruit;
    });
  }

Finally override the build() method:

    @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("DropDown Button Example"),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text("Please choose a fruit: "),
              new DropdownButton(
                value: _selectedFruit,
                items: _dropDownMenuItems,
                onChanged: changedDropDownItem,
              )
            ],
          )),
        ),
      ),
    );
  }

Here is the full code for main.dart:

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}
class MyAppState extends State<MyApp> {
  List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
  List<DropdownMenuItem<String>> _dropDownMenuItems;
  String _selectedFruit;
  @override
  void initState() {
    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
    _selectedFruit = _dropDownMenuItems[0].value;
    super.initState();
  }
  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
    List<DropdownMenuItem<String>> items = new List();
    for (String fruit in fruits) {
      items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
    }
    return items;
  }
  void changedDropDownItem(String selectedFruit) {
    setState(() {
      _selectedFruit = selectedFruit;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("DropDown Button Example"),
        ),
        body: new Container(
          child: new Center(
              child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text("Please choose a fruit: "),
              new DropdownButton(
                value: _selectedFruit,
                items: _dropDownMenuItems,
                onChanged: changedDropDownItem,
              )
            ],
          )),
        ),
      ),
    );
  }
}

Demo

Here is the demo

Download

No.	Link
1.	Download code

Special thanks to @nisrulz for creating this great example.

The License for the above code is Apache Version 2.0.