我一直在嘗試 3 天來將資料發布到 api 中。但未能取得成功。我為此使用顫振http包。首先，我嘗試使用普通的應用程式/json，但失敗了。然后我嘗試了formdata仍然失敗。然后我想出了一個使用多部分請求的想法。然后我試試這段代碼：
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;
}
}
這是我的前端代碼：
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,
),
),
],
),
],
),
),
);
}
}
在這里您可以看到一個函式 addDisplay()。當我使用 TextFormField 傳遞資料并將資料發送到 api 時，它會回傳創建狀態。但是當我檢查資料庫時，我什么也沒看到。我的意思是實際上沒有插入資料。
編輯：
我收到 200 狀態。但不將資料保存在api中。
uj5u.com熱心網友回復：
使用 Flutter DIo 包。使用 Dio 包后將被保存。試試這個代碼：
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;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/526304.html
標籤：扑镖