Drop down list also known as Spinner in android is used to select single Item from given multiple choices. In flutter we have already make a tutorial on Creating DropdownButton List from static string array List data but in Today’s tutorial we would do this by JSON Parsing Data. We would create DropdownButton in flutter using JSON data coming from server and parse the data into Spinner. We would use flutter’s Future method to create the function which would parse the data and then convert the JSON complete object into String List. So in this tutorial we would Flutter Creating JSON Parse Spinner Drop Down Button List Android iOS Example Tutorial.
Note:- I’m using jsonplaceholder website demo URL which would provide us free JSON data for testing purpose. The URL of JSON data is https://jsonplaceholder.typicode.com/comments?postId=1 . If you execute this URL in browser then you’ll see all the JSON in Text format.
Contents in this project Flutter Creating JSON Parse Spinner Drop Down List Android iOS Example Tutorial:
1. The first step is to import all the major used 3 libraries in our flutter project. So open your project’s main.dart file and import material.dart, dart:convert, http.dart package.
|
1 2 3 |
import 'package:flutter/material.dart'; import 'dart:convert'; import 'package:http/http.dart' as http; |
2. Creating void main runApp() default calling method with our Root parent class named as MyApp.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Parent class MyApp extends StatelessWidget. Inside this class we would call the JsonSpinner() class widget.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('JSON Spinner Drop Down List in Flutter')), body: JsonSpinner(), ), ); } } |
4. Creating a class named as JsonSpinner extends StatefulWidget. We would make this class in order to use State in given class tree. Here we would make another class object named as JsonSpinnerWidget with createState() method to allow State management.
|
1 2 3 |
class JsonSpinner extends StatefulWidget { JsonSpinnerWidget createState() => JsonSpinnerWidget(); } |
5. Creating a new class named as JsonSpinnerWidget extends State<JsonSpinner>. This is our main Child class in which we would done all the major coding.
|
1 2 3 4 5 |
class JsonSpinnerWidget extends State<JsonSpinner> { } |
6. Creating a String variable named as selectedSpinnerItem with default value [email protected] . We would also use this variable to hold the selected item form Spinner Drop Down List Button.
|
1 |
7. Creating 1 List object and 1 Future object variable.
|
1 2 |
List data = List(); Future myFuture; |
8. Creating a final type String variable named as uri. This variable holds the JSON URL .
|
1 |
final String uri = 'https://jsonplaceholder.typicode.com/comments?postId=1'; |
9. Creating Future<String> fetchData() async method. Inside this method we would parse the JSON coming from Web URL and store inside data State.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Future<String> fetchData() async { var response = await http.get(uri); if (response.statusCode == 200) { var res = await http .get(Uri.encodeFull(uri), headers: {"Accept": "application/json"}); var resBody = json.decode(res.body); setState(() { data = resBody; }); print('Loaded Successfully'); return "Loaded Successfully"; } else { throw Exception('Failed to load data.'); } } |
10. Creating initState() method and here we would use the Future object and assign the method fetchData to myFuture. This would disable the Future method calling again and again.
|
1 2 3 4 5 |
@override void initState() { myFuture = fetchData(); super.initState(); } |
11. Creating Widget Build area. Inside the Widget Build area we would use the FutureBuilder method and First we would show the CircularProgressIndicator() widget while loading JSON data from server and then we would display the DropdownButton() widget with JSON data on mobile screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
Widget build(BuildContext context) { return FutureBuilder<String>( future: myFuture, builder: (context, snapshot) { if (!snapshot.hasData) return Center(child: CircularProgressIndicator()); return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ DropdownButton( items: data.map((item) { return DropdownMenuItem( child: Text(item['email']), value: item['email'], ); }).toList(), onChanged: (newVal) { setState(() { selectedSpinnerItem = newVal; }); }, value: selectedSpinnerItem, ), Text( 'Selected Item = ' + '$selectedSpinnerItem', style: TextStyle(fontSize: 22, color: Colors.black), textAlign: TextAlign.center, ), ])), ); }); } |
12. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import 'package:flutter/material.dart'; import 'dart:convert'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('JSON Spinner Drop Down List in Flutter')), body: JsonSpinner(), ), ); } } class JsonSpinner extends StatefulWidget { JsonSpinnerWidget createState() => JsonSpinnerWidget(); } class JsonSpinnerWidget extends State<JsonSpinner> { List data = List(); Future myFuture; final String uri = 'https://jsonplaceholder.typicode.com/comments?postId=1'; Future<String> fetchData() async { var response = await http.get(uri); if (response.statusCode == 200) { var res = await http .get(Uri.encodeFull(uri), headers: {"Accept": "application/json"}); var resBody = json.decode(res.body); setState(() { data = resBody; }); print('Loaded Successfully'); return "Loaded Successfully"; } else { throw Exception('Failed to load data.'); } } @override void initState() { myFuture = fetchData(); super.initState(); } @override Widget build(BuildContext context) { return FutureBuilder<String>( future: myFuture, builder: (context, snapshot) { if (!snapshot.hasData) return Center(child: CircularProgressIndicator()); return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ DropdownButton( items: data.map((item) { return DropdownMenuItem( child: Text(item['email']), value: item['email'], ); }).toList(), onChanged: (newVal) { setState(() { selectedSpinnerItem = newVal; }); }, value: selectedSpinnerItem, ), Text( 'Selected Item = ' + '$selectedSpinnerItem', style: TextStyle(fontSize: 22, color: Colors.black), textAlign: TextAlign.center, ), ])), ); }); } } |
Screenshots:-
