Flutter dropdown list example

Hi, Flutter developers in this fluter article we learn how to make a flutter dropdown list example. Dropdown like a spinner in android user can click on the dropdown shows a list of items to drop a layout. A dropdownbuttonformfield flutter is shown a list of items. If you can create a Form in your app and you want to show the state city name in the dropdown.

In this fluter tutorial, we make a custom dropdown in a flutter. and when you can click on a dropdown item the show as a selected in list. So let’s start o make its Start your android studio and make a flutter project. After creating the project open your main.dart file and clear all code.

flutter dropdown form field.

you can use the flutter dropdown form field class to create a dropdown in your main.dar file sees the below class.

class _MyHomePageState extends State<MyHomePage> {

  String dropdownvalue = 'Apple';

  var items =  ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DropDownList Example"),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownButton(
                value: dropdownvalue,

                icon: Icon(Icons.keyboard_arrow_down),

                items:items.map((String items) {
                  return DropdownMenuItem(
                      value: items,
                      child: Text(items)
                  );
                }
                ).toList(),
                onChanged: (newValue){
                  setState(() {
                    dropdownvalue = newValue.toString();
                  });
                },

              ),
            ],
          ),
        ),
      ),
    );
  }

Complete code for creating a flutter dropdown list Main dart file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String dropdownvalue = 'Apple';

  var items =  ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DropDownList Example"),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownButton(
                value: dropdownvalue,

                icon: Icon(Icons.keyboard_arrow_down),

                items:items.map((String items) {
                  return DropdownMenuItem(
                      value: items,
                      child: Text(items)
                  );
                }
                ).toList(),
                onChanged: (newValue){
                  setState(() {
                    dropdownvalue = newValue.toString();
                  });
                },

              ),
            ],
          ),
        ),
      ),
    );
  }
}

used these complete codes for making a customer dropdown list in flutter you can learn more flutter tutorial Click_Hare.

Get Full Source Code on GitHub