Drop down menu - Flutter

Today we are going to develop simple number list as drop down menu

Step 1 - Create new flutter Application — Give it a any name you like

Step 2 - Now we want to remove all the existing codes of the default application (don’t remove following codes)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drop down menu',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyDropDown()
    );
  }
}

Step 3 - Make a own brand new StatefulWidget

You can give any name. i am going to name it as MyDropDown. After creating this you need to give it name as home in MyApp class.

home: MyDropDown()

Step 4 - Make a List in that created state class. in my case it name is _MyDropDownState

final List<String> numbers=["1","2","3","4","5","6","7","8","9","10"];

Step 5 - Make a variable for hold selected value

this is use to give initial value for the drop down list and also it can hold selected value from the drop down

String _selectedValue="1";

Step 6 - Return Scaffold widget in created State class

And inside the scaffold I would like to have a container. so that I can apply some padding to all the content that inside it. You can apply the padding by EdgeInsets.All. and on the child i will make a column widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      padding: EdgeInsets.all(32),
      child: Column(
        children: [
        ],
      ),
    ),
  );
}

Step 7 - Make a Drop Down

Inside the column widget I would like to have drop down.

DropdownButton <String>(
      value: _selectedValue,
      onChanged: (value){
        setState(() {
          _selectedValue=value;
        });
      },
      
      items: numbers.map<DropdownMenuItem<String>>((value){
        return DropdownMenuItem(
            child: Text(value),
            value: value,

        );
      }).toList(),

),

ok. lest developed it. run it and test.. !

Our fianl code is like this

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drop down menu',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyDropDown()
    );
  }
}

class MyDropDown extends StatefulWidget {
  const MyDropDown({Key key}) : super(key: key);

  @override
  _MyDropDownState createState() => _MyDropDownState();
}

class _MyDropDownState extends State<MyDropDown> {

  final List<String> numbers=["1","2","3","4","5","6","7","8","9","10"];

  String _selectedValue="1";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(32),
        child: Column(
          children: [
            DropdownButton <String>(
              value: _selectedValue,
              onChanged: (value){
                setState(() {
                  _selectedValue=value;
                });
              },
              
              items: numbers.map<DropdownMenuItem<String>>((value){
                return DropdownMenuItem(
                    child: Text(value),
                    value: value,

                );
              }).toList(),

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