Flutter Creating JSON Parse Spinner Drop Down Button List Android iOS Example Tutorial

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.

2. Creating void main runApp() default calling method with our Root parent class named as MyApp.

3. Creating our main Parent class MyApp extends StatelessWidget. Inside this class we would call the JsonSpinner() class widget.

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.

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.

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.

7. Creating 1 List object and 1 Future object variable.

8. Creating a final type String variable named as uri. This variable holds the JSON URL .

9. Creating Future<String> fetchData() async method. Inside this method we would parse the JSON coming from Web URL and store inside data State.

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.

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.

12. Complete source code for main.dart file:

Screenshots:-

Flutter Creating JSON Parse Spinner Drop Down List Android iOS Example Tutorial

Flutter Creating JSON Parse Spinner Drop Down List Android iOS Example Tutorial Flutter Creating JSON Parse Spinner Drop Down Button List Android iOS Example Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *