Future Builder is returning null data from API even if snapshot is not null

Question

I'm getting null values in my ListView.builder inside the FutureBuilder from the API call, when I print out the response body, it is not empty and when I print out the snapshot.hasData it returns true. When I hardcode the values for return object (User) from the API call, it returns that hardcoded value. Here is the code: the API call:

Future<User> getUser() async {
    final response = await apiRequest(
        Method.GET, '/user/ID');
    Map<String, dynamic> jsonDecodedResponse = jsonDecode(response.body);
    return User(
      id: jsonDecodedResponse['id'],
      dob: jsonDecodedResponse['dob'], // when I hardcode this to dob: 'QWERTY' it returns the value QWERTY to the FutureBuilder
    );
  }

UserList with Future Builder where I call the api getUser():

 Future<User> _getUserList() async {
   
    var _userData = await APICalls.instance.getUser();

    return _userData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder<User>(
          future: _getUserList(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
print(snapshot.hasData); // returns true
              return ListView.builder(
                itemCount: 2, //snapshot.data.length is not working so I had to set it to count 2
                itemBuilder: (context, index) {
                return Text("${snapshot.data.dob}"); // this is null unless I hard code it in the API call return statement
                       }
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return Container();
          },
        ),
      ),
    );
  }
}

User Model:

class Userextends ChangeNotifier {
  final String id,dob;

  User(
      {this.id,
      this.dob});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      dob: json['dob'],
    
    );
  }
}

Any sort of help is appreciated, thanks in advance!

Solution

Ok, so the I had to add ['data'] at the end of the Map<String, dynamic> jsonDecodedResponse = jsonDecode(response.body); so the final solution to this 'problem' is

Map<String, dynamic> jsonDecodedResponse = jsonDecode(response.body)['data'];

Should've payed more attention to the jsonResponse!

Thank you all for the help.

Comments

[ahmetakil]

I would put a breakpoint at Map<String, dynamic> jsonDecodedResponse = jsonDecode(response.body); and inspect the body and then take a look at jsonDecodedResponse object

[GrandMagus]

typo, will change it in the original post.

[Huthaifa Muayyad]

please post your json file.

[GrandMagus]

While I was copy/pasting the json file I realized the mistake, posted it as an answer. Thanks again mate!

[GrandMagus]

While I'm bothering you, do you know maybe why do I get and error Error: The getter 'length' isn't defined for the class 'User'. when I use snapshot.data.length in the itemCount: snapshot.data.length in this same module? Should I define the Model as a list and then use snapshot.data.length?

[Huthaifa Muayyad]

No bothering at all, because user is not a list or iterable object. If youhad a list of Users, you can capture their length