Flutter Dropdown Option | Spinner Example

Hi, In this Flutter tutorial I am going to explain how to make a dropdown options menu in flutter using spinner widget, Spinner allows you to select an item from a drop-down menu, so let's understand complete dropdown option menu example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Spinner Drop Down List in Flutter')),
        body: DropDown(),
      ),
    );
  }
}





class DropDown extends StatefulWidget {
  @override
  DropDownWidget createState() => DropDownWidget();
}


class DropDownWidget extends State {

  String dropdownValue = 'Two';

  List <String> spinnerItems = ['One','Two','Three','Four','Five'];

 

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child :
        Column(children: <Widget>[

          DropdownButton<String>(
            value: dropdownValue,
            icon: Icon(Icons.arrow_drop_down),
            iconSize: 24,
            elevation: 16,
            style: TextStyle(color: Colors.red, fontSize: 18),
            underline: Container(
              height: 2,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (String data) {
              setState(() {
                dropdownValue = data;
              });
            },
            items: spinnerItems.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
                );
               }
             ).toList(),
           ),
         ]
       ),
     ),
   );
 }
}