Flutter: How to print nested map to listView or futurebuilder - flutter

Question

I have this response from my server and wants to print the values on screen, values keep returning null.
This is the json response:
{
"responseCode": 99,
"message": "User Found!",
"responseData": {
"id": 10,
"role": {
"id": 1,
"name": "CUSTOMER",
"description": "This is the user of the application"
},
"firstName": "Austin",
"lastName": "Miles",
"createdOn": "2020-05-12T10:25:06.442+00:00",
"dob": null,
"emailAddress": "example#gmail.com",
"phoneNumber": null,
"profilePhotoUrl": null,
"profilePhotoFormat": null,
"isDisabled": false
}
}
This was the class I was using:
import 'dart:convert';
class User {
String firstName;
String lastName;
String password;
String emailAddress;
String phoneNumber;
String profilePhoto;
String role;
String securityKey;
String dob;
String objectId;
User(
{this.firstName,
this.lastName,
this.password,
this.emailAddress,
this.dob,
this.phoneNumber,
this.profilePhoto,
this.role,
this.objectId,
this.securityKey});
factory User.fromJson(Map<String, dynamic> json) => User(
firstName: json['firstName'] as String,
lastName: json['lastName'] as String,
password: json['password']as String,
emailAddress: json['emailAddress']as String,
phoneNumber: json['phoneNumber']as String,
profilePhoto: json['profilePhoto']as String,
role: json['role']as String,
securityKey: json['securityKey']as String,
dob: json['dob']as String,
objectId: json['objectId']as String,
);
Map<String, dynamic> toJson() => {
'firstName': firstName,
'lastName': lastName,
'password': password,
'emailAddress': emailAddress,
'dob': dob,
'phoneNumber': phoneNumber,
'role': role,
'profilePhoto': profilePhoto,
'securityKey': securityKey,
};
#override
String toString() {
return 'User{firstName: $firstName, lastName: $lastName, password: $password,emailAddress: $emailAddress, phoneNumber: $phoneNumber, profilePhoto: $profilePhoto,role: $role, securityKey: $securityKey, objectId: $objectId}';
}
}
// List<User> userFromJson(String jsonData) {
// final data = json.decode(jsonData);
// return List<User>.from(data.map((item) => User.fromJson(item)));
// }
List<User> userFromJson(String str) =>
List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(User data) {
final jsonData = data.toJson();
return json.encode(jsonData);
}
I made this attempt as follows on ProfilePage screen
import 'dart:convert';
import 'package:ars_progress_dialog/ars_progress_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:project2/toks_model/user.dart';
import 'package:project2/utils/userHandler.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class ProfilePage extends StatefulWidget {
#override
_ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
FlutterSecureStorage storage = FlutterSecureStorage();
UserDialog usd;
User userModel = User();
getUser() async {
String token = await storage.read(key: "token");
progressDialog.show();
http.Response response = await http.get(
Uri.parse("http://BaseUrl/api/user/get-current-user-details"),
headers: {
"Authorization": "Bearer $token",
"Content-type": "application/json",
},
);
var jsonResponse = json.decode(response.body);
setState(() {
userModel = User.fromJson({"responseData": jsonResponse});
print(userModel);
progressDialog.dismiss();
});
}
#override
void initState() {
super.initState();
getUser();
}
ArsProgressDialog progressDialog;
#override
Widget build(BuildContext context) {
progressDialog = ArsProgressDialog(context,
blur: 2,
backgroundColor: Colors.blue[900],
dismissable: false,
loadingWidget: Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(10)),
width: 220,
height: 60,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: Row(
children: [
CupertinoActivityIndicator(
radius: 20,
),
SizedBox(width: 10),
Text('Please wait...',
style:
TextStyle(fontSize: 13, fontWeight: FontWeight.bold)),
],
)),
),
));
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: <Widget>[
// background image and bottom contents
Column(
children: <Widget>[
Container(
height: 200.0,
decoration: BoxDecoration(
// color: Colors.blue,
image: DecorationImage(
image: AssetImage('asset/pat4.jpg'), fit: BoxFit.cover),
),
child: Center(
child: Text(
'Sample APP' + '\n' + 'Serving your security needs',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.person, color: Colors.blueGrey),
SizedBox(width: 10),
Text(
userModel.firstName,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
],
),
Divider(
thickness: 0.8,
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.mail, color: Colors.blueGrey),
SizedBox(width: 10),
Text(
userModel.emailAddress,
style: TextStyle(fontSize: 14),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.phone, color: Colors.blueGrey),
SizedBox(width: 10),
Text(
userModel.phoneNumber,
style: TextStyle(fontSize: 14),
),
],
),
SizedBox(height: 10),
Text(
"Any thing else...",
style: TextStyle(fontSize: 14),
),
],
),
)
],
),
// Profile image
Positioned(
top: 150.0, // (background container size) - (circle height / 2)
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
image: DecorationImage(
fit: BoxFit.cover,
image: userModel.profilePhoto != null
? NetworkImage(userModel.profilePhoto)
: AssetImage("asset/imageicon.png"),
),
),
),
),
],
),
);
}
}
Please any help will be appreciated.
Thanks in anticipation.

Answer 1

As your API result, I think you should modify as below:
var jsonResponse = json.decode(response.body);
setState(() {
userModel = User.fromJson(jsonResponse["responseData"]);
print(userModel);
progressDialog.dismiss();
});
You should use responseData of API result.