How do i display api responses in text widgets in flutter? - flutter

Question

In the following image, I am using the post method to send the data, which is successfully done and when the server returns the response which is can be seen in the user's console, now how do I display those responses in text widgets in another class?
This is my Api class where I use post method.
class APIService {
Future<DoctorResponseLoginModels> register(
DoctorRequestLoginModels doctorLoginRequestModels) async {
String url = "http://202.51.75.142:9028/api/PatientMaster/PostPatientLogin";
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
var globalToken = sharedPreferences.getString("token");
print("$globalToken");
http.Response response = await http.post(Uri.parse(url),
headers: {
"Content-Type": "application/json",
'Accept': 'application/json',
'Authorization': 'Bearer $globalToken',
},
body: jsonEncode(doctorLoginRequestModels));
var responseJson = json.decode(response.body.toString());
DoctorResponseLoginModels responseModel =
DoctorResponseLoginModels.fromJson(responseJson);
print("This is ${response.body}");
if (response.statusCode == 200) {
sharedPreferences.setInt('code', response.statusCode);
var StatusCode = sharedPreferences.getInt('code');
print("This contains : $StatusCode");
print(response.statusCode);
return DoctorResponseLoginModels.fromJson(jsonDecode(response.body));
} else {
throw Exception('Failed');
}
}
}
This is my Request Class model which I sent to server
DoctorRequestLoginModels doctorRequestLoginModelsFromJson(String str) =>
DoctorRequestLoginModels.fromJson(json.decode(str));
String doctorRequestLoginModelsToJson(DoctorRequestLoginModels data) =>
json.encode(data.toJson());
class DoctorRequestLoginModels {
DoctorRequestLoginModels({
required this.code,
required this.username,
required this.password,
});
String code;
String username;
String password;
factory DoctorRequestLoginModels.fromJson(Map<String, dynamic> json) =>
DoctorRequestLoginModels(
code: json["code"],
username: json["username"],
password: json["password"],
);
Map<String, dynamic> toJson() => {
"code": code,
"username": username,
"password": password,
};
}
This is my Response Models class which I need to display in text
DoctorResponseLoginModels doctorResponseLoginModelsFromJson(String str) =>
DoctorResponseLoginModels.fromJson(json.decode(str));
String doctorResponseLoginModelsToJson(DoctorResponseLoginModels data) =>
json.encode(data.toJson());
class DoctorResponseLoginModels {
DoctorResponseLoginModels({
this.doctorId,
this.nmCno,
this.doctorName,
this.contactNo,
this.username,
this.emailId,
this.strEmail,
this.id,
this.intMobile,
this.gender,
this.currentAddress,
this.depId,
this.entryDate,
this.password,
this.code,
this.isActive,
this.hospitalName,
this.department,
this.deviceId,
this.profile,
this.token,
this.role,
});
int? doctorId;
String? nmCno;
String? doctorName;
String? contactNo;
dynamic? username;
String? emailId;
String? strEmail;
int? id;
String? intMobile;
dynamic? gender;
String? currentAddress;
int? depId;
String? entryDate;
dynamic? password;
dynamic? code;
bool? isActive;
dynamic? hospitalName;
dynamic? department;
dynamic? deviceId;
String? profile;
String? token;
String? role;
factory DoctorResponseLoginModels.fromJson(Map<String, dynamic> json) =>
DoctorResponseLoginModels(
doctorId: json["doctorID"],
nmCno: json["nmCno"],
doctorName: json["doctorName"],
contactNo: json["contactNo"],
username: json["username"],
emailId: json["emailID"],
strEmail: json["strEmail"],
id: json["id"],
intMobile: json["intMobile"],
gender: json["gender"],
currentAddress: json["currentAddress"],
depId: json["depId"],
entryDate: json["entryDate"],
password: json["password"],
code: json["code"],
isActive: json["isActive"],
hospitalName: json["hospitalName"],
department: json["department"],
deviceId: json["deviceId"],
profile: json["profile"],
token: json["token"],
role: json["role"],
);
Map<String, dynamic> toJson() => {
"doctorID": doctorId,
"nmCno": nmCno,
"doctorName": doctorName,
"contactNo": contactNo,
"username": username,
"emailID": emailId,
"strEmail": strEmail,
"id": id,
"intMobile": intMobile,
"gender": gender,
"currentAddress": currentAddress,
"depId": depId,
"entryDate": entryDate,
"password": password,
"code": code,
"isActive": isActive,
"hospitalName": hospitalName,
"department": department,
"deviceId": deviceId,
"profile": profile,
"token": token,
"role": role,
};
}
This is where I am using Future Builder to display in Text
return Scaffold(
backgroundColor: const Color.fromRGBO(249, 249, 249, 10),
body: Column(
children: [
Expanded(
child: Container(
height: 150.0,
width: 150.0,
color: Colors.grey.shade100,
child: FutureBuilder<DoctorResponseLoginModels>(
future: APIService().register(DoctorRequestLoginModels(
code: "code", username: "username", password: "password")),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Text('Loading....');
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
DoctorResponseLoginModels data = snapshot.data!;
return Column(
children: [
Text(data.doctorName!),
],
);
}
}
},
),
)),
],
));
And this is the image of response I get in my console after I use post method and this is the response which I need to display in my text widgets

Answer 1

The correct approach would be to put the API-Class to a Provider.
Access the Instance whenever you need.

Answer 2

You can use FutureBuilder like this:
FutureBuilder<DoctorResponseLoginModels>(
future: APIService().register(...),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Text('Loading....');
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
DoctorResponseLoginModels data = snapshot.data!;
return Column(
children: [
Text(data.doctorName ?? ''),
Text(data.username?? ''),
],
);
}
}
},
),