I have been trying 3 long days to post the data into the api. But failed to achieve success. I am using flutter http package for that. First I tried with normal application/json but failed. Then I tried formdata still failed. Then I came up with a idea of using multipart request. Then I try this code:
Future<bool> createDisplay(String name, String category, String templateName,
String productId) async {
var url = Uri.parse(
"https://digital-display.betafore.com/api/v1/digital-display/displays/");
var token = localStorage.getItem('access');
try {
var request = http.MultipartRequest("post", url);
request.headers.addAll({
"Authorization":
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NDk0NTAwLCJpYXQiOjE2Njc0MDgxMDAsImp0aSI6ImY5NzRjODE4MThiMTQ2NjBiNmIzNmNmZDcwNWU1MDlhIiwiaWQiOjV9.fXHnaYDn5FT7NLzMTPPQE6HwIrMBF6HhpF1c8VHevAU"
});
request.fields["name"] = json.encode(name);
request.fields["category"] = json.encode(category);
request.fields["template_name"] = json.encode(templateName);
request.fields["products"] = json.encode(productId);
var response = await request.send();
if (response.statusCode == 200) {
return true;
} else {
Future.error("Error");
return false;
}
} catch (exception) {
Future.error(exception);
return false;
}
}
Here is my frontend code:
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 int productId;
String productId = "";
// String catelogImage = "";
// String video = "";
//String productId = "";
final _form = GlobalKey<FormState>();
DisplayController displayController = DisplayController();
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, productId);
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();
},
),
],
);
});
}
}
@override
Widget build(BuildContext context) {
final ButtonStyle buttonStyle1 = ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFc3232a),
shape: const StadiumBorder(),
minimumSize: const Size(100, 50),
);
final ButtonStyle buttonStyle2 = ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFc3232a),
shape: const StadiumBorder(),
minimumSize: const Size(100, 50),
);
final ButtonStyle buttonStyle3 = ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF111111),
shape: const StadiumBorder(),
minimumSize: const Size(100, 50),
);
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: const Color(0xFF111111),
title: const Text(
"Digital Display Generator",
textAlign: TextAlign.end,
),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 350,
width: 1600,
child: GridView.count(
crossAxisCount: 1,
scrollDirection: Axis.horizontal,
children: List.generate(6, (i) => const DisplayCard()),
),
),
),
],
),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 1600,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Categories",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
)),
],
),
Center(
child: Container(
width: 1600,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Delete"),
style: buttonStyle2,
),
),
],
)),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 2,
width: 1600,
color: Colors.grey,
),
],
),
const SizedBox(
height: 30,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40,
width: 1600,
color: Colors.black,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"https://www.123123123123.com/watch-display-1212",
style: TextStyle(
fontSize: 16.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
Container(
height: 45,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
// alignment: Alignment.center,
height: 2,
width: 1600,
color: Colors.grey,
),
],
),
Container(
height: 45,
),
Center(
child: Container(
height: 180,
width: 1600,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(0.0),
boxShadow: const [
BoxShadow(
color: Color(0xFFF5F5F5),
blurRadius: 1,
spreadRadius: 1,
)
]),
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!)!;
productId = value as String;
},
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,
),
),
),
],
),
],
),
),
),
),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 1600,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"DIGITAL FLYER",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
)),
],
),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 1600,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(0.0),
border: Border.all(color: Colors.grey)),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Image.network(
"https://binaries.templates.cdn.office.net/support/templates/en-us/lt16412134_quantized.png",
height: 280,
width: 500,
fit: BoxFit.cover,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Container(
width: 900,
child: TextField(
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Banner Text',
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),
),
),
),
),
),
Padding(
padding: EdgeInsets.all(10),
child: Container(
width: 500,
child: TextField(
autofocus: true,
style: const TextStyle(
fontSize: 15.0, color: Colors.black),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Banner Text',
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),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Add Text"),
style: buttonStyle3,
),
),
],
),
],
),
),
),
],
),
const SizedBox(height: 20),
// Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Container(
// width: 1600,
// child: const Padding(
// padding: EdgeInsets.all(8.0),
// child: ProductDisplayCard(),
// )),
// ],
// ),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Dashboard"),
style: buttonStyle1,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Create Product"),
style: buttonStyle2,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Logout"),
style: buttonStyle2,
),
),
],
),
],
),
),
);
}
}
Here you can see a function addDisplay(). When I pass data using TextFormField and send data to the api it return with created status. But When I check the database I saw nothing at all. I mean no data inserted actually.
Edit:
I am receiving 200 status. But not saving the data in the api.
CodePudding user response：
Use Flutter DIo package. After using Dio package it will be saved. Try this code:
Future<bool> addDisplay11(String name, String category, String templateName,
String catalogsImage, String catalogsVideo, int productId) async {
try {
Dio dio = new Dio();
FormData formData = FormData.fromMap({
"name": name,
"category": category,
"template_name": templateName,
"catalogs[0]image": catalogsImage,
"catalogs[0]video": catalogsVideo,
"products[0]": productId
});
// dio.options.headers["Authorization"] =
// "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NTQ0MTU5LCJpYXQiOjE2Njc0NTc3NTksImp0aSI6ImY2Mjk4MjM5ZWM0ZTQzY2VhMTRkYjFlZDliMTgxZTY4IiwiaWQiOjV9.S9N23F0Qrh5aa7qJdzSAPX__0zIU-swlwBVb5ZZkM6s";
var response = await Dio().post(url,
data: formData,
options: Options(headers: {
"Authorization":
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NTQ0MTU5LCJpYXQiOjE2Njc0NTc3NTksImp0aSI6ImY2Mjk4MjM5ZWM0ZTQzY2VhMTRkYjFlZDliMTgxZTY4IiwiaWQiOjV9.S9N23F0Qrh5aa7qJdzSAPX__0zIU-swlwBVb5ZZkM6s"
}));
if (response.statusCode == 200) {
print(response.data);
notifyListeners();
return true;
} else {
print("ERROR VAI ERROR");
return false;
}
} on DioError catch (e) {
print(e);
return false;
}
}