Flutter Show JSON ListView Selected Value to Next Activity Screen

Hello friends, It’s been few months since I had posted a tutorial regarding on JSON topic. So Here I come. Recently when I was seeing some of my old projects in Flutter, Then I saw It would be a good topic for beginners because you can learn 2 things together in this tutorial. First learn about parsing JSON another is Sending value from one screen to next screen. One more thing we’re using Jsonplaceholder fake JSON API for testing purpose in this tutorial. So in this tutorial we would learn about Flutter Show JSON ListView Selected Value to Next Activity Screen.

Contents in this project Flutter Show JSON ListView Selected Value to Next Activity Screen :-

1. First of all we have to install http 0.13.4 Pub package in our current flutter project. In order to use HTTP packages in our code. So open your flutter project Root directory in CMD or Terminal and execute below command.

2. Now we’re ready to roll on. So open your project’s main.dart file and import material.dart, dart:convert and http.dart package.

3. Creating void main runApp() method and here we would call our main Root parent class MyApp.

4. Creating MyApp class and in this class we would call our App class.

5. Now we would pause the further coding and make our main Object class. The main purpose of this class is to parse JSON values like id, name and email from JSON object to a list string.

6. Creating our main App extends StatefulWidget. In this class we would call Json_ListView class with createState() method to enable mutable State management in the given class tree.

7. Cerating our main JSON List screen class named as Json_ListView. This is officially our first screen.

8. Creating a Future type of ASYNC function named as fetchJSON with our Object class. In this function we would simply extract the data like id, name and email from JSON coming from online URL and return it into Object form.

9. Creating another function named as getItemAndNavigate() with 3 arguments name, email and context of app. Now in this function what we do is, We would send all these items to the next activity screen with their object reference name. We would call this function on List item on Tap event.

10. Creating Widget Build area -> Here we would make the FutureBuilder widget and call the fetchJSON function here and after parsing JSON show all the data into List View.

11. Creating our next class named as SecondScreen. In this class we would simply receive the Send item from previous screen. One more important thing In previous class which object name we would use must be same in this class to receive the data.

12. Complete source code for main.dart file :-

Screenshots :-

Flutter Show JSON ListView Selected Value to Next Activity Screen Flutter Show JSON ListView Selected Value to Next Activity Screen

Leave a Reply

Your email address will not be published.