Flutter – Lists with JSON

Hi Friends,

This post is a continuation of my previous post here. I would kindly request you to read it once before proceeding.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

Let’s begin.

A screencast of this post is available here.

Let’s continue from where we left off.

In our last post we saw how to make a http request and receive a json response right ?

Now open up main.dart file and modify it as shown below.

Let’s break this down.

First, I have removed the button in the center of the screen. Instead of the button, I need to make the http request automatically when the app loads. So, I am overriding the initState() function and making the call.

Once I receive the data, I am simply creating a list with a set of tiles and from the response I got, I am just getting the name, phone number and avatar image alone.

Now run the app and you will see the below screen.


Cool right?

Now let’s write some code to interact with this list. Let’s do a simple onTap interaction. When someone taps a list item, he’ll be taken to a different page where he could see the profile picture or any other details of the particular list item he tapped on.

Open up main.dart and modify it as shown below.

I have created a new class called SecondPage in which I am placing a box on the screen. I am giving a border to this box and then giving a radius of half the value of the height and width of the container in which the box is present. Which means it will now be a circular border.

Then I am simply creating a Material page route and passing the data of the tapped list element. This is then caught by the constructor in the SecondPage class and stored.

Now if you run the app, you will see the below screen.

For instance let’s tap the first element.


Try tapping a different list item. The image of that item would be shown here.


Cool right? That’s it.

In this post we have seen a very simple way to structure and present the data that we receive from a http request.

If you found this helpful, kindly share it with someone and help them too.

Join our Flutter Community – here.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Lois Genesis

    Hello pls is it possible to show a different Widget like
    Widget _showNoDataUI() {
    return new Scaffold(
    body: new Text(“NO DATA FROM LIST”)

    if the data == null or data.isEmpty
    When i replaced data == null ?_showNoDataUI() : data.length its throws type ‘Scaffold’ is not a subtype of type ‘int’

    • Don’t return a scaffold from that widget. Just return a container containing the text from the other widget. Thanks.

      • Lois Genesis

        I just did data.length == 0 ? new Text(“NO DATA FROM LIST”: data.lenght
        it printed type ‘Text’ is not a subtype of type ‘int’

        when I did data == null on a list that was empty it didnt write the text on the Ui or throw any error it was just blank, Thanks for replying.

  • hello, i have a question, in ionic we could use infinite scroll if we have thousands data, i just starting to learn flutter, so how we did it in flutter sir?

  • tuo

    Hi, thank you for the amazing tutorials.
    I have an exception: “type ‘String’ is not a subtype of type ‘int’ of ‘index'”
    when trying to use:
    var extractdata = json.decode(response.body);
    data = extractdata[“results”];
    Without the second line everything works fine if we don’t have a nested array in the JSON file…

  • Mike Soertsz

    void initState() no longer works looks like.

    “This method overrides a method annotated as @mustCallSuper in ‘State’, but does not invoke the overridden method.dart(must_call_super)”

  • Sinan Aktepe

    How can we get all of login section? I mean uuid,username,password,salt … all together

  • Carlos Ferranti

    good work!