Flutter show api data using POST - flutter

Question

Hi need help to show my API data into Text.
I already get the response but I don't know how to turn it into text which it will show at the screen.. now the data are shows at the terminal.
This is my codes:
class carList extends StatefulWidget {
const carList({Key? key}) : super(key: key);
#override
State<carList> createState() => _carListState();
}
class _carListState extends State<carList> {
var userController = TextEditingController();
var apiController = TextEditingController();
final pref = Pref();
#override
void initState() {
MySharedPreferences().getUserId().then((value) {
setState(() {
userController.text = value.toString();
});
});
MySharedPreferences().getUserToken().then((value) {
setState(() {
apiController.text = value.toString();
});
});
//TODO: IMPLEMENT INITSTATE
}
this is where I want to show my API data
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
child: TextField(
controller: userController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.email),
labelText: 'User ID',
),
),
),
Container(
padding: const EdgeInsets.all(10),
child: TextField(
controller: apiController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.email),
labelText: 'Token',
),
),
),
Container(
margin: EdgeInsets.all(25),
child: TextButton(
child: Text('Show Car List',
style: TextStyle(fontSize: 20.0,
color: Colors.blueAccent,
backgroundColor: Colors.white),
),
onPressed: () {
list();
},
),
)
]
)
);
}
this is my API response
void list() async {
{
var response = await http.post(
Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
body: ({
'user_id': userController.text,
'token': apiController.text,
'device': "Android",
}));
if (response.statusCode == 200) {
final body = jsonDecode(response.body);
print(apiController.text);
print(body.toString());
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Successfully Login")));
}
}
}
}
This page that I want to show my data.
this is my log response
{
"Status": "OK",
"Message": "Senarai maklumat kereta.",
"Details": [
{
"car_id": 184,
"user_id": 141,
"manufacturer_id": 21,
"name": "Akma",
"registration_no": "ws 3345",
"model_name": "Bezza",
"production_year": 2022,
"notes": null,
"date_purchased": "2022-08-10",
"image":
" http://servisjer.me-tech.com.my/admin/storage/app/media/userplugin/7PyVIp8iwb.png"
}
]
}

Answer 1

Best way to use API response data is to create model from https://app.quicktype.io/ (copy your response and paste on this link and select language dart) and use as per your requirement.
I create model with name "GetUserCarModel" from your API response and use like this way.
Future<void> list() async {
{
var response = await http.post(
Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
body: ({
'user_id': userController.text,
'token': apiController.text,
'device': "Android",
})
);
if (response.statusCode == 200) {
final body = jsonDecode(response.body);
GetUserCarModel getUserCarModel = GetUserCarModel.fromJson(body);
print("getUserCarModel ===> ${getUserCarModel.toString()}");
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Successfully Login")));
}
}
}

Answer 2

First of all you have to crate a model class of your response.
import 'dart:convert';
CarDetailResponse carDetailResponseFromJson(String str) => CarDetailResponse.fromJson(json.decode(str));
String carDetailResponseToJson(CarDetailResponse data) => json.encode(data.toJson());
class CarDetailResponse {
CarDetailResponse({
this.status,
this.message,
this.details,
});
String? status;
String? message;
List<Detail>? details;
factory CarDetailResponse.fromJson(Map<String, dynamic> json) => CarDetailResponse(
status: json["Status"],
message: json["Message"],
details: List<Detail>.from(json["Details"].map((x) => Detail.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"Status": status,
"Message": message,
"Details": List<dynamic>.from(details!.map((x) => x.toJson())),
};
}
class Detail {
Detail({
this.carId,
this.userId,
this.manufacturerId,
this.name,
this.registrationNo,
this.modelName,
this.productionYear,
this.notes,
this.datePurchased,
this.image,
});
int? carId;
int? userId;
int? manufacturerId;
String? name;
String? registrationNo;
String? modelName;
int? productionYear;
dynamic notes;
DateTime? datePurchased;
String? image;
factory Detail.fromJson(Map<String, dynamic> json) => Detail(
carId: json["car_id"],
userId: json["user_id"],
manufacturerId: json["manufacturer_id"],
name: json["name"],
registrationNo: json["registration_no"],
modelName: json["model_name"],
productionYear: json["production_year"],
notes: json["notes"],
datePurchased: DateTime.parse(json["date_purchased"]),
image: json["image"],
);
Map<String, dynamic> toJson() => {
"car_id": carId,
"user_id": userId,
"manufacturer_id": manufacturerId,
"name": name,
"registration_no": registrationNo,
"model_name": modelName,
"production_year": productionYear,
"notes": notes,
"date_purchased": "${datePurchased!.year.toString().padLeft(4, '0')}-${datePurchased!.month.toString().padLeft(2, '0')}-${datePurchased!.day.toString().padLeft(2, '0')}",
"image": image,
};
}
you can make this model class with the help of app.quicktype.io
then after getting response, assign the response.body to this model class object
void list() async {
{
var response = await http.post(
Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
body: ({
'user_id': userController.text,
'token': apiController.text,
'device': "Android",
}));
if (response.statusCode == 200) {
final body = jsonDecode(response.body);
setState(() {
carDetailResponse =
carDetailResponseFromJson(body);
});
print(apiController.text);
print(body.toString());
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Successfully Login")));
}
}
}
}
then at UI use this model class to show data. Like -
class CarDetailScreen extends StatefulWidget {
const CarDetailScreen({Key? key}) : super(key: key);
#override
State<CarDetailScreen> createState() => _CarDetailScreenState();
}
class _CarDetailScreenState extends State<CarDetailScreen> {
CarDetailResponse? carDetailResponse;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
child: TextField(
controller: userController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.email),
labelText: 'User ID',
),
),
),
Container(
padding: const EdgeInsets.all(10),
child: TextField(
controller: apiController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
suffixIcon: Icon(Icons.email),
labelText: 'Token',
),
),
),
Container(
margin: EdgeInsets.all(25),
child: TextButton(
child: Text(
'Show Car List',
style: TextStyle(fontSize: 20.0, color: Colors.blueAccent, backgroundColor: Colors.white),
),
onPressed: () {
list();
},
),
),
carDetailResponse != null
? Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: carDetailResponse!.details!.length,
itemBuilder: (context, index) {
var car = carDetailResponse!.details![index];
return Text(car.name ?? '');
},
),
)
: const SizedBox()
]));
}
}

Answer 3

assuming this is valid response :
{
"Status":"OK",
"Message":"Sena.",
"Details":[
{
"car_id":184,
"user_id":141,
"manufacturer_id":21,
"name":"Akma",
"registration_no":"ws 3345",
"model_name":"Bezza",
"production_year":2022,
"notes":null,
"date_purchased":"2022-08-10",
"image":"http://servisjer.me-tech.com.my/admin/storage/app/media/userplugin/7PyVIp8iwb.png"
}
]
}
then to get save the details is a list so you have to loop through the list i.e
if(body["Status"]=="OK")
{
List<Detail> allRecord;
final parsed = json.decode(body).cast<Map<String, dynamic>>();
allRecord = parsed .map<Detail>((json) => Detail.fromJson(json)).toList();
}
here is your model :
// To parse this JSON data, do
//
// final responseModel = responseModelFromJson(jsonString);
import 'dart:convert';
ResponseModel responseModelFromJson(String str) => ResponseModel.fromJson(json.decode(str));
String responseModelToJson(ResponseModel data) => json.encode(data.toJson());
class ResponseModel {
ResponseModel({
this.status,
this.message,
this.details,
});
String status;
String message;
List<Detail> details;
factory ResponseModel.fromJson(Map<String, dynamic> json) => ResponseModel(
status: json["Status"],
message: json["Message"],
details: List<Detail>.from(json["Details"].map((x) => Detail.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"Status": status,
"Message": message,
"Details": List<dynamic>.from(details.map((x) => x.toJson())),
};
}
class Detail {
Detail({
this.carId,
this.userId,
this.manufacturerId,
this.name,
this.registrationNo,
this.modelName,
this.productionYear,
this.notes,
this.datePurchased,
this.image,
});
int carId;
int userId;
int manufacturerId;
String name;
String registrationNo;
String modelName;
int productionYear;
dynamic notes;
DateTime datePurchased;
String image;
factory Detail.fromJson(Map<String, dynamic> json) => Detail(
carId: json["car_id"],
userId: json["user_id"],
manufacturerId: json["manufacturer_id"],
name: json["name"],
registrationNo: json["registration_no"],
modelName: json["model_name"],
productionYear: json["production_year"],
notes: json["notes"],
datePurchased: DateTime.parse(json["date_purchased"]),
image: json["image"],
);
Map<String, dynamic> toJson() => {
"car_id": carId,
"user_id": userId,
"manufacturer_id": manufacturerId,
"name": name,
"registration_no": registrationNo,
"model_name": modelName,
"production_year": productionYear,
"notes": notes,
"date_purchased": "${datePurchased.year.toString().padLeft(4, '0')}-${datePurchased.month.toString().padLeft(2, '0')}-${datePurchased.day.toString().padLeft(2, '0')}",
"image": image,
};
}
Worst Approach : use a for each to loop through if you are sure the Details array has only one object i.e
for (var data in details)
{
debugPrint(data.model_name);
debugPrint(data.registration_no);
//and many more
}