How to properly handle an array of json in Flutter?

Question

So basically I am getting data from an api using the http package in flutter. The response.body is an array that looks like this:

[
   {
      "id":1,
      "full_name":"Cristiano Ronaldo",
      "avatar":"http://localhost:8000/media/avatars/Ronaldo.jpeg",
      "created":"2021-06-30T02:25:56.332816Z"
   },
   {
      "id":2,
      "full_name":"Paul Pogba",
      "avatar":"http://localhost:8000/media/avatars/Pogba.jpeg",
      "created":"2021-06-30T02:49:17.649970Z"
   },
   {
      "id":3,
      "full_name":"Paulo Dybala",
      "avatar":"http://localhost:8000/media/avatars/Dybala.jpeg",
      "created":"2021-06-30T02:52:33.338296Z"
   },
   {
      "id":4,
      "full_name":"Leonel Messi",
      "avatar":"http://localhost:8000/media/avatars/Messi.jpeg",
      "created":"2021-06-30T02:53:39.539556Z"
   },
   {
      "id":5,
      "full_name":"Kylian Mbappe",
      "avatar":"http://localhost:8000/media/avatars/Mbappe.jpeg",
      "created":"2021-06-30T02:57:29.891686Z"
   }
]

My problem is I want to essentially format this into the "dart" way. Something like this:

List players = response.body;

The error I'm getting is this:

A value of type 'String' can't be assigned to a variable of type 'List<dynamic>'.
Try changing the type of the variable, or casting the right-hand type to 'List<dynamic>'.

Why is this error occurring. I know the list is already properly formatted and the key-value pairs of the json objects are all strings but I would like to format it into the "dart" way. If I do this:

var players = response.body;

It does work. Should I just use var and call it good or should I format it?

Side Question: If I wanted to call the method to get the data from the api in the initState method, would I do:

Future<void> _getPlayers() async {
   ...
} 

void initState() {
   super.initState();
   _getPlayers();
}

Thank You!

Answer 1

There are many ways you can do this

Most efficient way is to Make a Object like this

class Player {
  final int id;
  final String fullName;
  final String avatar;
  final String created;

  const Player({this.id, this.fullName, this.avatar, this.created});

  Player.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    fullName = json['full_name'];
    avatar = json['avatar'];
    created = json['created'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['full_name'] = this.fullName;
    data['avatar'] = this.avatar;
    data['created'] = this.created;
    return data;
  }
}

Then You can add value

• Instead of like this

List players = response.body

• You can use like this

var data = json.decode(response.body);

List<Player> players  = data.map((element){
   return Player.fromJson(element);
}).toList();

For access data from players list

• You can do like this

players[0].fullName;
players[1].fullName;

Answer 2

Basically, you are trying to cast a JSON to list without decoding it,

an encoded JSON is a String like this

"{ \"username\": \"ali\", \"number\": \"[email protected]\" }"

and when you decode it, it becomes a List or a Map like this

{ 
   "username": "ali",
   "email": "[email protected]"
}

So to fix your code you need to decode the json and then cast it to a list

List players = jsonDecode(response.body);

...

Side Answer :

Yes you can do that but that will cause an exceptions while navigating between pages (imagine you sent a request to the server and when data comes you have to setState the widget but even when the widget disposes and you navigated to other pages, your method will call setState on an unmounted widget and it will cause exception)

So if you are not planning on using dependency management libraries then just use future builder