Flutter Tutorial

Flutter dropdown list example

custom dropdown flutter
2.1kviews

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

Welcome to my blog! I’m Ritu Malik, and here at Codeplayon.com, we are dedicated to delivering timely and well-researched content. Our passion for knowledge shines through in the diverse range of topics we cover. Over the years, we have explored various niches such as business, finance, technology, marketing, lifestyle, website reviews and many others.