How can I send post request with the attached api? - flutter

Question

I want to send post request to this api:
Here is the sample bearer token :
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3MjMzNjEzLCJpYXQiOjE2NjcxNDcyMTMsImp0aSI6IjgyNDg0YWYzMDdmOTQ0YjNhMTQ5ZWIzN2NkNjIzNGI4IiwiaWQiOjV9.qc9fmF4B0V6NTwxsztBb6AkF78kU_06wommCa5gLgOo
What I tried:
Here Is my Controller for the API:
Future<bool> createDisplay(
String name, String category, String templateName, int productId) async {
var url = Uri.parse(
"https://digital-display.betafore.com/api/v1/digital-display/displays/");
var token = localStorage.getItem('access');
try {
var formdata = new Map<String, dynamic>();
formdata["name"] = name;
formdata["category"] = category;
formdata["template_name"] = templateName;
formdata["products"] = productId;
http.Response response =
await http.post(url, body: json.encode(formdata), headers: {
"Content-Type": "application/json",
'Authorization':
'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3MjMzNjEzLCJpYXQiOjE2NjcxNDcyMTMsImp0aSI6IjgyNDg0YWYzMDdmOTQ0YjNhMTQ5ZWIzN2NkNjIzNGI4IiwiaWQiOjV9.qc9fmF4B0V6NTwxsztBb6AkF78kU_06wommCa5gLgOo'
});
Future.error(response.body);
var data = json.encode(response.body) as Map;
if (response.statusCode == 200) {
print(response.body);
return Future.error("Its working");
} else {
return Future.error("Code Proble");
}
} catch (exception) {
Future.error("Something is wrong with the codes");
return false;
}
}
Here is the front end code where I tried to send post request using textformfield.
import 'package:digitaldisplay/controllers/DisplayController.dart';
import 'package:digitaldisplay/views/widgets/Display.dart';
import 'package:digitaldisplay/views/widgets/ProductDisplayCard.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:provider/provider.dart';
class CreateDisplay extends StatefulWidget {
const CreateDisplay({super.key});
static const routeName = "/create-display";
#override
State<CreateDisplay> createState() => _CreateDisplayState();
}
class _CreateDisplayState extends State<CreateDisplay> {
String _name = "";
String _category = "";
String _templateName = "";
late final int _product;
// String catelogImage = "";
// String video = "";
//String productId = "";
final _form = GlobalKey<FormState>();
void _addDisplay() async {
var isValid = _form.currentState!.validate();
if (!isValid) {
return;
}
_form.currentState!.save();
bool create = await Provider.of<DisplayController>(context, listen: false)
.createDisplay(_name, _category, _templateName, _product);
if (create) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Created"),
actions: [
ElevatedButton(
child: const Text("Return"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});
} else {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Failed to create display!"),
actions: [
ElevatedButton(
child: const Text("Return"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});
}
}
child: Form(
key: _form,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
child: Padding(
padding: EdgeInsets.all(10),
child: TextFormField(
validator: (v) {
if (v!.isEmpty) {
return "Please Enter a valid name";
} else {
return null;
}
},
onSaved: (value) {
_name = value as String;
},
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Name',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 73, 57, 55)),
borderRadius: BorderRadius.circular(0.0),
),
enabledBorder: UnderlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(0.0),
),
),
),
),
),
Flexible(
child: Padding(
padding: EdgeInsets.all(10),
child: TextFormField(
validator: (v) {
if (v!.isEmpty) {
return "Please enter valid category title";
} else {
return null;
}
},
onSaved: (value) {
_category = value as String;
},
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Category',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 73, 57, 55)),
borderRadius: BorderRadius.circular(0.0),
),
enabledBorder: UnderlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(0.0),
),
),
),
),
),
Flexible(
child: Padding(
padding: EdgeInsets.all(10),
child: TextFormField(
validator: (v) {
if (v!.isEmpty) {
return "Please enter valid template name";
} else {
return null;
}
},
onSaved: (value) {
_templateName = value as String;
},
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Template Name',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 73, 57, 55)),
borderRadius: BorderRadius.circular(0.0),
),
enabledBorder: UnderlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(0.0),
),
),
),
),
),
Flexible(
child: Padding(
padding: EdgeInsets.all(10),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (v) {
if (v!.isEmpty) {
return "Please enter valid product Id";
} else {
return null;
}
},
onSaved: (value) {
_product = int.tryParse(value!) ?? 0;
},
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Product Id',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 73, 57, 55)),
borderRadius: BorderRadius.circular(0.0),
),
enabledBorder: UnderlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(0.0),
),
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
_addDisplay();
},
child: Text("Add Display"),
style: buttonStyle2,
),
),
),
],
),
],
I only added the code of my frontend where I tried to pass the value. But Can't post data. I am getting an error also. The error is:
{"status":"error","message":{"products":["Expected a list of items but got type \"int\"."]}}
When I send data using postman It works perfectly. I think its for formdata though I am not sure about it. Is there any solution for this issue?

Answer 1

It says it in the error there. "Expected a list of items but got type "int" In your post you are putting productId which is an int in the "products". The backend is looking for a list of products here. You can try
formdata["products"] = [productId];
to see what you come up with. I don't know what the backend is looking for in terms of the products list though. It is strange that the post with an int works in Postman too.