Flutter Dropdown Button tutorial for beginners

 

Flutter Dropdown :

Flutter dropdown let’s you select the item from a list of items available populated when a user clicks on a button.The best example we use is for selecting gender, time format so on.

The usage of the dropdown also provides you the space complexity issue raised by making a list appear on popup window so that it will be appearing when ever required and will be closed once selected a option.

Dropdown is a part of the material design providing user friendly easy to understand interface and can be used even in listviews, gridviews and many more widgets.

These  flutter dropdown list makes the text predefined, as when asked user to enter text they may make any mistakes in grammatical way or may use their own keywords instead of available.

There is also a scenario where we can use multiple dropdowns where the user select a option then based on the option another dropdown is loaded dynamically.

 

Flutter Dropdown Video Tutorial:

Go through the below tutorial for more details on implementation.

 

main.dart :

Initialize with void main()

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

 

Providing a variable title as private( _ )

static const String _title = 'Flutter Drop Down';

 

Returning a MaterialApp with Scaffold and inside provide a AppBar with title and body.

MaterialApp(
  title: _title,
  home: Scaffold(
    appBar: AppBar(title: const Text(_title)),
    body: Center(
      child: MyStatefulWidget(),
    ),
  ),
);

 

Create a State for MyStatefulWidget extending a StatefulWidget

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

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

 

Provide a variable for storing the selected dropdown value

String dropdownValue = 'Android';

 

Define a list of values provided to be populated in dropdown

['Android', 'iOS', 'Symbian', 'Windows','java','blackberry']

 

When the value is selected form dropdown list then we need to know the changed value

onChanged: (String newValue) {
  setState(() {
    dropdownValue = newValue;
  });
},

 

Return a DropdownButton providing the necessary parameters

value : Assign the String variable declared to get the selected value.

icon : An icon to represent dropdown

onChanged() : To handle the changed status using a anonymous function.

items : And also add a list of values to be populated inside the drop down

We have skipped few general parameters like icon size and so on which you can understand by going through the code.

 

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: <String>['Android', 'iOS', 'Symbian', 'Windows','java','blackberry']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
);

 

FullCode :

Fullcode is provided to integrate flutter dropdown.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Drop Down';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue = 'Android';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: <String>['Android', 'iOS', 'Symbian', 'Windows','java','blackberry']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

 

Output :

This screen below depicts the usage of flutter dropdown