Hello Guys How are you all? Hope you all are fine. A Dropdown in Flutter helps app users to select an item from a drop-down menu item. This widget will show the selected item on drop-down button and icon to indicate user it has a list of item to select. Here in this tutorial, we are going to learn How to implement dropdown list in flutter?

Table of Contents

How to implement dropdown list in flutter?
To implement dropdown list in flutter just Create a list of items to show them in the Dropdown spinner in a flutter. Now just add Initial Value from your itemList. Initial Value will appear when the user doesn't select any value. Now we are set to make our DropdownButton. Just use DropdownButton() widget we will use value, icon, onChanged and items poroperty of DropdownButton() widget. Then, I have used a map function that simply iterates to a list of items (items – Array list), so the map function in the first iteration will set item[0] to the drop-down, then in the second iteration, the second item will be set and so on up to the end of the array string.
implement dropdown list in flutter
To implement dropdown list in flutter just Create a list of items to show them in the Dropdown spinner in a flutter. Now just add Initial Value from your itemList. Initial Value will appear when the user doesn't select any value. Now we are set to make our DropdownButton. Just use DropdownButton() widget we will use value, icon, onChanged and items poroperty of DropdownButton() widget. Then, I have used a map function that simply iterates to a list of items (items – Array list), so the map function in the first iteration will set item[0] to the drop-down, then in the second iteration, the second item will be set and so on up to the end of the array string.

Time Needed : 05 minutes

Here in this tutorial, we are going to implement a dropdown list in the flutter follow all the below steps.

First Of all, Create a list of Items.
Create a list of items to show them in the Dropdown spinner in a flutter.
Add Initial Value
Now just add Initial Value from your itemList. Initial Value will appear when the user doesn't select any value.
Make DropdownButton
Now we are set to make our DropdownButton. Just use DropdownButton() widget we will use value, icon, onChanged and items poroperty of DropdownButton() widget.

value: A selected value from the drop-down will be shown in the drop-down button.
icon: to show a drop icon next to the button.
onChanged: when the user selects an option from the drop-down, the value on dropdownbutton changed.
items: where you need to pass your list of items that you want to show in DropDownMenuItem.
Define items in DropdownButton() widget
Then, I have used a map function that simply iterates to a list of items (items – Array list), so the map function in the first iteration will set item[0] to the drop-down, then in the second iteration, the second item will be set and so on up to the end of the array string.
Complete Source Code
Complete source code of Drop Down Button

Tools

Android Studio
Flutter

Materials

DropdownButton() widget

Complete source code of Drop Down Button

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart ';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  String initialValue = 'Select Standerd';

  var itemList = [
    'Select Standerd',
    'Std1',
    'Std2',
    'Std3',
    'Std4',
    'Std5',
    'Std6',
    'Std7'
  ];

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('DropDownList - FlutterCorner'),
        backgroundColor: Colors.green,
      ),
      body: Container(
        color: Colors.grey,
        height: size.height,
        width: size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 20),
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              margin: EdgeInsets.symmetric(horizontal: 20),
              child: DropdownButton(
                isExpanded: true,
                iconEnabledColor: Colors.white,
                style: TextStyle(color: Colors.white, fontSize: 16),
                dropdownColor: Colors.green,
                focusColor: Colors.black,
                value: initialValue,
                icon: Icon(Icons.keyboard_arrow_down),
                items: itemList.map((String items) {
                  return DropdownMenuItem(value: items, child: Text(items));
                }).toList(),
                onChanged: (String newValue) {
                  setState(() {
                    initialValue = newValue;
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

Summery

So, It’s All About This tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.

How to implement dropdown list in flutter?

Tools

Materials

Complete source code of Drop Down Button

Summery

Also Check Out Below Tutorials

Share this:

Leave a Comment Cancel reply