Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Add Dropdown Button with Items in Flutter

In this example, we are going to show you the easiest way to implement the dropdown button and add Menu Items from array List. We also show you the way to select value, set the initial value. See the example. 

How to Add DropdownButton and implement Items inside:

List<String> listitems = ["United States of America", "Canada", "United Kingdom", "China", "Russia", "Austria"];
String selectval = "United States of America";

DropdownButton(
    value: selectval,
    onChanged: (value){
        setState(() {
          selectval = value.toString();
        });
    },
    items: listitems.map((itemone){
        return DropdownMenuItem(
          value: itemone,
          child: Text(itemone)
        );
    }).toList(),
)

Here, selectval will be the selected item, you can use this variable while submitting your form.

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List<String> listitems = ["United States of America", "Canada", "United Kingdom", "China", "Russia", "Austria"];
  String selectval = "United States of America";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Dropdown Button in Flutter"),
              backgroundColor: Colors.deepOrange,
          ),
          body: Container( 
              margin: EdgeInsets.only(top:80),
              alignment: Alignment.topCenter,
              child: DropdownButton(
                  value: selectval,
                  onChanged: (value){
                     setState(() {
                        selectval = value.toString();
                     });
                  },
                  items: listitems.map((itemone){
                      return DropdownMenuItem(
                        value: itemone,
                        child: Text(itemone)
                      );
                  }).toList(),
              ),
          )
      );
  }
}

Output Screenshot:

In this way, you can add DropdownButton widget and populate Items from List Array in Flutter.

No any Comments on this Article


Please Wait...