Create a dependent drop down field in Flutter

Icons made by Pixel perfect from www.flaticon.com

Although the Flutter documentation is extremely helpful, it is still lacking some key tutorials about some things that might look simple, however are critical in real world applications, specially in the corporate field. There are some tutorials that cover this topic, however none of them are easy to follow for newbies. In this article I will give you a step-by-step guide on how to create a dependent drop down field in Flutter



1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create a drop_down.dart file. This is where we are going to work:

 

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

5. So far so good right? It might look like a lot of files/steps but this will be a structure of our app. Open the main_app.dart and add a stateless widget that will return our main widget app:

6. Open the drop_down.dart and create our Main App widget. We will create a form in our widget. Copy the following code, and as you can see we are returning a SafeArea with a Form in the body:

	import 'package:flutter/material.dart';
	class DropDownApp extends StatefulWidget {
	@override
	createState() => _DropDownAppState();
	}
	class _DropDownAppState extends State {
	@override
	Widget build(BuildContext context) {
	// TODO: implement build
	return SafeArea(
	child: Scaffold(
	appBar: AppBar(
	title: Text('Dependable Dropdown Field'),
	),
	body: Container(
	child: new Form(
	),
	),
	),
	);
	}
	}

view raw dropdown_main.dart hosted with ❤ by GitHub

7. Things are going well. You can even start the app right now:

 

8. Lets add an Padding class, and inside it, create a child with a new Container specifying the width, and another column that will have our widget as children:

	child: Padding(
	padding: const EdgeInsets.only(top: 16.0, left: 28),
	child: new Container(
	width: 350,
	child: Column(
	children: [
	],
	),
	),
	),

view raw dropdown_container.dart hosted with ❤ by GitHub

9. For purposes of this example, lets add a text field inside the widget:

	[
	new TextFormField(
	keyboardType: TextInputType.emailAddress,
	decoration: const InputDecoration(
	icon: const Icon(Icons.email),
	hintText: 'Type your name',
	labelText: 'Name',
	),
	),
	],

view raw dropdown_text_filed.dart hosted with ❤ by GitHub

10. Now, before adding our dropdown fields, we will create our models, that we will need to populate our dependable dropdown fields. I will use in this example the Provinces and States of my home country, so that each time you select a State in the first dropdown field, the second one will only show the Provinces that belongs only to the State selected. Let’s create a Models folder, and inside it a localization_model.dart file:

Open that file, and create three classes:

1. Localization (Main)
2. States
3. Provinces

Let’s build our Provinces Class first, like this:

	class Provinces {
	final int id;
	final String name;
	final int stateId;
	Provinces({this.id, this.name, this.stateId});
	factory Provinces.fromJson(Mapdynamic> parsedJson) {
	return Provinces(id: parsedJson['id'], name: parsedJson['name'], stateId: parsedJson['state_id']);
	}
	}

view raw dropdown_provinces_class.dart hosted with ❤ by GitHub

And then our States Class like this:

	class States {
	final int id;
	final String name;
	States({this.id, this.name});
	factory States.fromJson(Mapdynamic> parsedJson){
	return States(id: parsedJson['id'], name: parsedJson['name']);
	}
	}

view raw dropdown_states_class.dart hosted with ❤ by GitHub

You might be wondering why I’m using fromJson, and this is because I will be using a Json file to get all the values.  Finally, build the Localization Class like this:

	class Localization {
	final List provinces;
	final List states;
	Localization({this.provinces, this.states});
	factory Localization.fromJson(Mapdynamic> json) {
	return Localization(
	states: parseStates(json),
	provinces: parseProvinces(json),
	);
	}
	static List parseStates(statesJson) {
	var slist = statesJson['states'] as List;
	List statesList =
	slist.map((data) => States.fromJson(data)).toList();
	return statesList;
	}
	static List parseProvinces(provincesJson) {
	var plist = provincesJson['provinces'] as List;
	List provincesList =
	plist.map((data) => Provinces.fromJson(data)).toList();
	return provincesList;
	}
	}

view raw dropdown_localization_class.dart hosted with ❤ by GitHub

11. Create a folder outside of lib called “json”, there you will save the JSON file (Available in the Github repository). Also add the Assets in the pubspec.yaml

	assets:
	- json/states.json

view raw dropdown_assets_pubspec.yaml hosted with ❤ by GitHub

Since you are in the pubspec, add the HTTP library as dependency:

http: ^0.12.0+2

view raw dropdown_dependency_pubspec.yaml hosted with ❤ by GitHub

12. Now that we have everything ready (Models and Assets), go back to the drop_down.dart, there you need to import the following libraries and the model class:

	import 'package:http/http.dart' as http;
	import 'dart:async';
	import 'dart:convert';
	import 'dart:io';
	import 'package:flutter/services.dart';
	import 'package:drop_example/Models/localization_model.dart';

view raw dropdown_dropdown_import.dart hosted with ❤ by GitHub

14. Create two variables: statesList and provincesList as List variables, and also a tempList where the filtered provinces will be saved temporarily:

	class _DropDownAppState extends State {
	List statesList = List();
	List provincesList = List();
	List tempList = List();
	String _state;
	String _province;

view raw dropdown_dropdown_variables.dart hosted with ❤ by GitHub

Tip: Add the _state and _province variables to save the selected options for each dropdown

15. Create a Future function that will be called when we need to get the contents of the JSON file:

	Future loadStatesProvincesFromFile() async {
	return await rootBundle.loadString('json/states.json');
	}

view raw dropdown_dropdown_load_states.dart hosted with ❤ by GitHub

16. Create another Future function that will use the previous function to get the contents of the JSON file, decode it, and make it an iterable list:

	Future _populateDropdown() async {
	String getPlaces = await loadStatesProvincesFromFile();
	final jsonResponse = json.decode(getPlaces);
	Localization places = new Localization.fromJson(jsonResponse);
	setState(() {
	statesList = places.states;
	provincesList = places.provinces;
	});
	}

view raw populate_dropdown.dart hosted with ❤ by GitHub

17. Override the initState method to initialize the _populateDropdown function:

	void initState() {
	super.initState();
	this._populateDropdown();
	}

view raw dropdown_init_state.dart hosted with ❤ by GitHub

18. Add a new dropdown field, where we will map the states that we got from the JSON and add each item to the dropdown list:

	new DropdownButton(
	isExpanded: true,
	icon: const Icon(Icons.add_location),
	items: statesList.map((item) {
	return new DropdownMenuItem(
	child: new Text(item.name),
	value: item.id.toString(),
	);
	}).toList(),
	onChanged: (newVal) {
	setState(() {
	_province = null;
	_state = newVal;
	tempList = provincesList
	.where((x) =>
	x.stateId.toString() == (_state.toString()))
	.toList();
	});
	// print(testingList.toString());
	},
	value: _state,
	hint: Text('Select a state'),
	),

view raw dropdown_button.dart hosted with ❤ by GitHub

I am already adding the provinces filter in the onChanged call back, so that each time the user changes state, the correct provinces will be added to the other dropdown.

19. Look how is the app going right now:

20. Now, add the Provinces drop down field, using the tempList to build its items:

	new DropdownButton(
	isExpanded: true,
	icon: const Icon(Icons.gps_fixed),
	items: tempList.map((item) {
	return new DropdownMenuItem(
	child: new Text(item.name),
	value: item.id.toString(),
	);
	}).toList(),
	onChanged: (newVal) {
	setState(() {
	_province = newVal;
	});
	},
	value: _province,
	hint: Text('Select a province'),
	),

view raw second_dropdown_result.dart hosted with ❤ by GitHub

And that’s it! You just created a dependable drop down field with Flutter! 

Any questions or suggestions, just drop a comment!

You can get the code here: Dependable Drop Down Field with Flutter

Update:
By the way, the code has been updated. The DropDownFormField cannot be used for this specific purpose.