Related
I try to make login with Flutter, Nodejs(Express), and oracle
the backend is working when I test it with POSTMAN I can get the token
here postman test
data show in cmd when I try with Postman
this image contains the data show in the flutter debugger
but the problem is
when I try to link the flutter and the node the data sent from flutter is not received in node js
the IDNUMBER and PASS have the value of undefined
means req.body.IDNUMBER=undefined and req.body.PASS=undefined
data show in cmd when I try with flutter in nodejs
I know that I'm missing something
here the flutter code
import 'dart:convert';
import 'package:app_project/homepage.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
class Login extends StatefulWidget {
Login({Key? key}) : super(key: key);
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
TextEditingController _idNumberController = new TextEditingController();
TextEditingController _passController = new TextEditingController();
bool _isloading = false;
bool showpass = true;
String url = "http://192.168.1.19:3000/auth2";
signIn(String idNumber, String pass) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
Map body = {"IDNUMBER": idNumber, "PASS": pass};
var jsonResponse;
var res = await http
.post(Uri.parse(url), body: {"IDNUMBER": idNumber, "PASS": pass});
// check the api status (connection)
if (res.statusCode == 200) {
jsonResponse = await json.decode(json.encode(res.body));
print("the body is ${body}");
print("Response status 1 :${res.statusCode}");
print("Response status 2 :${res.body}");
if (jsonResponse != null) {
setState(() {
_isloading = false;
print("Response status 2 2 :${res.body}");
});
//print(jsonResponse.runtimeType);
sharedPreferences.setString("token", jsonResponse.toString());
Navigator.of(context).pushReplacementNamed("homepage");
}
} else {
setState(() {
_isloading = false;
});
print("Response status 3 :${res.body}");
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("images/1.png"),
Container(
margin: EdgeInsets.all(20),
child: Form(
child: Column(
children: [
TextFormField(
controller: _idNumberController,
cursorColor: Colors.red,
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "اكتم رقمك التسلسلي",
prefixIcon: Icon(Icons.person),
filled: true,
fillColor: Colors.orange[100],
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide:
BorderSide(color: Colors.orange, width: 3)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide:
BorderSide(width: 1, color: Colors.orange)),
focusColor: Colors.red),
),
SizedBox(
height: 30,
),
TextFormField(
controller: _passController,
cursorColor: Colors.red,
obscureText: showpass,
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
showpass = !showpass;
});
},
icon: showpass
? Icon(Icons.remove_red_eye_sharp)
: Icon(Icons.remove_red_eye_outlined)),
hintText: "اكتم كلمة المرور",
prefixIcon: Icon(Icons.lock),
filled: true,
fillColor: Colors.orange[100],
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide:
BorderSide(color: Colors.orange, width: 3)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide:
BorderSide(width: 1, color: Colors.orange)),
focusColor: Colors.red),
),
SizedBox(
height: 30,
),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: 35, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100))),
onPressed: () {
setState(() {
_isloading = true;
});
signIn(
_idNumberController.text, _passController.text);
print("id = ${_idNumberController.text}");
print("pass = ${_passController.text}");
},
icon: Icon(Icons.login),
label: Text("سجل الدخول"))
],
)),
)
],
)
],
),
);
}
}
here the node code post function
app.post("/auth2", async (req, res) => {
try {
connection = await oracledb.getConnection({
user: "system",
password: password,
connectString: "localhost:1521/XE"
});
console.log('connected to database');
// run query to get all employees
console.log(`the req id ${req.body.IDNUMBER}`)
console.log(`the req PASS ${req.body.PASS}`)
result = await connection.execute(`SELECT IDNUMBER,PASS FROM USERS WHERE IDNUMBER=:IDNUMBER AND PASS=:PASS`,
[req.body.IDNUMBER,req.body.PASS]
);
let ress = {
"IDNUMBER": result.rows[0][0],
"PASS":result.rows[0][1]
}
console.log({
//those variables show as undefined
"IDNUMBER": result.rows[0][0],
"PASS":result.rows[0][1]
})
if (result.rows.length != 0) {
const token = jwt.sign({ _id: ress }, 'privateKey');
console.log(token);
res.json({ token: token });
} else {
res.json({"message":"there is no one in the database has this idnumber"})
}
} catch (err) {
console.log("the information is not passing ")
return res.send(err.message)
}
})
Use jsonEncode to send your parameters.
Use headers to tell your NodeJs server that you are sending parameters.
Map<String, String> requestHeaders =
{'Content-type': 'application/json',
'Accept': 'application/json',};
var res = await http.post(Uri.parse(url),body:jsonEncode(body), headers: requestHeaders);
I created a user profile screen, where user can also edit the fields by clicking on edit button, it will appear a popup dialogue where i display the fields which are allowed to edit. And I am using API which i create it using NodeJS to update that fields, it is working, values are updating.
Problem:
There are 5 fields in edit dialogue box (email, phoneNo, address, education and martialstatus), but if user only want to edit the education field, and want rest field remain same, and when user click on update change button where i call the api, it only update the that field which is edited and update the other field to null, because it gets null value from the field controller (i am passing the textfield controller to api body parameter).
Solution which i think:
It can be done using conditions (if-else) to handle the null value, by passing the old values which i am getting using shared preference, but it will be not efficient, because there are 5 fields yet, but if in future if edit fields number increase, then more condition (checks) will be needed.
here is backend api code:
updateprofile = (req,res)=>{
jwt.verify(req.body.token, 'secret' , function(err, decoded) {
if(err) {
err["expiredAt"] = err["expiredAt"].toLocaleString();
res.status(300).json(err)
}
else
{
User.find({"username":req.body.username,_id: req.body.id},function(err,data){
console.log(req.body)
User.updateOne({"username":req.body.username, _id: req.body.id}, {"email":req.body.email,"education":req.body.education,"PhoneNo":req.body.PhoneNo,"address":req.body.address,"martialstatus":req.body.martialstatus},function(err,dat){
if(err)
res.json("You Last login Yesterday");
else
{
var token = jwt.sign({
data: 'foobar'
}, 'secret', { expiresIn: "30 minute"})
res.status(200).json({auth: true, AccessToken: token,email:req.body.email,education:req.body.education,phone:req.body.PhoneNo,address:req.body.address,martialstatus:req.body.martialstatus})
}
})})
}})}
here is edit dialogue and shared preference code:
String getname="";
String getemail="";
String getdesignation="";
String getType="";
String getId="";
String getToken="";
String getEducation="";
String getPhone="";
String getMartialStatus="";
String getAddress="";
String getDob="";
_userDetails() async{
SharedPreferences myPrefs=await SharedPreferences.getInstance();
setState(() {
getname=myPrefs.getString('name');
getemail=myPrefs.getString('email');
getdesignation=myPrefs.getString('designation');
getType=myPrefs.getString('type');
getId=myPrefs.getString('UserId');
getToken=myPrefs.getString('accesstoken');
getPhone=myPrefs.getString('phone');
getEducation=myPrefs.getString('education');
getMartialStatus=myPrefs.getString('martialstatus');
getAddress=myPrefs.get('address');
getDob=myPrefs.get('DOB');
});
}
_displayTextInputDialog(BuildContext context) {
return showDialog(
context: context,
builder: (context) {
return
Center(child:
Column(children: <Widget>[
AlertDialog(
title: Text('Profile Edit'),
content: Column(children: <Widget>[
TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: email,
decoration: InputDecoration(hintText: getemail,icon: Icon(Icons.email)),
),
TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: phone,
decoration: InputDecoration(hintText: getPhone,icon: Icon(Icons.phone)),
),
TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: address,
decoration: InputDecoration(hintText: getAddress,icon: Icon(Icons.location_on)),
),
TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: education,
decoration: InputDecoration(hintText: getEducation,icon: Icon(Icons.library_books)),
),
TextField(
onChanged: (value) {
setState(() {
valueText = value;
});
},
controller: martialstatus,
decoration: InputDecoration(hintText: getMartialStatus,icon: Icon(Icons.group)
),
)],),
actions: <Widget>[
FlatButton(
color: Colors.green,
textColor: Colors.white,
child: Text('Update Changes'),
onPressed: () {
setState(() {
valuebutton = valueText;
updateProfile(); //here calling the api function to udpate the values
Navigator.pop(context);
});
},
),
],)
],
));
});
}
here i'm using api and calling the function on update changes button
Dio dio = new Dio();
var data={};
Future updateProfile() async {
try{
var data={
"username":getname,
"id":getId,
"token":getToken,
"email":email.text,
"PhoneNo":phone.text,
"martialstatus":martialstatus.text,
"address":address.text,
"education":education.text
}; dio
.post(localHostUrlUpdateProfile, data: json.encode(data))
.then((onResponse) async {
showDialog(context: context,
builder: (BuildContext context){
return AdvanceCustomAlert(
title: "Profile Updated",
descriptions:"Profile is updated successfully!",icon: Icons.check,
bgcolor: Colors.green,
fgcolor: Colors.green,);
}
);
});}
catch (e) {
print("error");
bool checkStatus =
OSError.noErrorCode == 113 || OSError.noErrorCode == 101;
print(checkStatus);
print(OSError.noErrorCode == 113);
if (e is DioError) {
print(e.response);
}
if (checkStatus == false) {
print("con er");
showDialog(
context: context,
builder: (BuildContext context) {
return AdvanceCustomAlert(
title: "Connection Error",
descriptions: "An unknown network error occured.",
icon: Icons.error,
bgcolor: Colors.red,
fgcolor: Colors.red,
);
});
}
}
}
hope all clear, please help if anyone know how to do this.
i just reduced the condition logic to this
if(email.text==""){
email.text=getemail;
}
if(phone.text==""){
phone.text=getPhone;
}
education.text=getEducation;
}
if(address.text==""){
address.text=getAddress;
}
if(martialstatus.text==""){
martialstatus.text=getMartialStatus;
}
it is working, would appreciate if someone know the better solution than this.
I'm working on a Flutter app, that consists of a employee scheduler with a Parse Server background.The app works as the following:
1)User opens the app;
2)The app shows a list of cards of available employees (if there is some in the server database)
3)The user is able to edit, confirm or delete the employee availability.
The app is working. It means that I'm able to CRUD data also from my Parse Server as from my app screen.
The goal: Every data change in the database needs to refresh (realtime) the user screen, removing, deleting or updating the (changed) data itself.
My idea: use parse_server_sdk: ^2.0.1 as a dependency (pubspec.yaml) and implement Live Queries (as the github docs here)
The Problem: after compilation, despite my AndroidStudio don't crashes visually speaking, nor my application itself, it shows me (logs) that "LiveQuery does not work, if there is ParseConnectivityProvider provided".
Without problems(main.dart):
void main() async{
runApp(MyApp());
}
Causing problems:
void main() async{
//the following parameters are in other file (constants.dart)...they are working
Parse().initialize(
kParseApplicationId,
kParseServerUrl,
masterKey: kParseMasterKey,
clientKey: kParseClientKey,
debug: true,
liveQueryUrl: kLiveQueryUrl,
autoSendSessionId: true,
);
var dietPlan = ParseObject('DietPlan')
..set('Name', 'Ketogenic')
..set('Fat', 65);
await dietPlan.save();
var response = await dietPlan.save();
if (response.success) {
dietPlan = response.result;
}
//until here, the program works well.The data is inserted and retrieved, ok...but exactly here..the problem!
final LiveQuery liveQuery = LiveQuery(); //from here..this is causing problems
QueryBuilder<ParseObject> query =
QueryBuilder<ParseObject>(ParseObject('DietPlan'))
..whereEqualTo('intNumber', 1);
Subscription subscription = await liveQuery.client.subscribe(query);
subscription.on(LiveQueryEvent.delete, (value) {
print('*** DELETE ***: ${DateTime.now().toString()}\n $value ');
print((value as ParseObject).objectId);
print((value as ParseObject).updatedAt);
print((value as ParseObject).createdAt);
print((value as ParseObject).get('objectId'));
print((value as ParseObject).get('updatedAt'));
print((value as ParseObject).get('createdAt'));
});
runApp(MyApp());
}
I didn't found any solution googleing.Any at all. After many research, I've got (going deep in the libraries) that Parse.Initialize(...) have connectivityProvider as one of it's parameters, but I didn't fill that parameter.
Also, the problems starts exactly when I've inserted the the line:
final LiveQuery liveQuery = LiveQuery();
Could someone help me to solve this issue?Thanks in advance
In the following, I'm showing all my code(main.dart):
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:intl/intl.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:marca_horario/model/data.dart';
import 'package:marca_horario/network_utils/data_utils.dart';
import 'package:http/http.dart';
import 'package:parse_server_sdk/parse_server_sdk.dart';
import 'package:marca_horario/constants.dart';
void myLQ() async {
Parse().initialize(
kParseApplicationId,
kParseServerUrl,
masterKey: kParseMasterKey,
clientKey: kParseClientKey,
debug: true,
liveQueryUrl: kLiveQueryUrl,
autoSendSessionId: true,
);
var dietPlan = ParseObject('DietPlan')
..set('Name', 'Ketogenic')
..set('Fat', 65);
await dietPlan.save();
var response = await dietPlan.save();
if (response.success) {
dietPlan = response.result;
}
final LiveQuery liveQuery = LiveQuery();
QueryBuilder<ParseObject> query =
QueryBuilder<ParseObject>(ParseObject('DietPlan'))
..whereEqualTo('intNumber', 1);
Subscription subscription = await liveQuery.client.subscribe(query);
subscription.on(LiveQueryEvent.delete, (value) {
print('*** DELETE ***: ${DateTime.now().toString()}\n $value ');
print((value as ParseObject).objectId);
print((value as ParseObject).updatedAt);
print((value as ParseObject).createdAt);
print((value as ParseObject).get('objectId'));
print((value as ParseObject).get('updatedAt'));
print((value as ParseObject).get('createdAt'));
});
}
void main() async{
Parse().initialize(
kParseApplicationId,
kParseServerUrl,
masterKey: kParseMasterKey,
clientKey: kParseClientKey,
debug: true,
liveQueryUrl: kLiveQueryUrl,
autoSendSessionId: true,
);
var dietPlan = ParseObject('DietPlan')
..set('Name', 'Ketogenic')
..set('Fat', 65);
await dietPlan.save();
var response = await dietPlan.save();
if (response.success) {
dietPlan = response.result;
}
final LiveQuery liveQuery = LiveQuery();
QueryBuilder<ParseObject> query =
QueryBuilder<ParseObject>(ParseObject('DietPlan'))
..whereEqualTo('intNumber', 1);
Subscription subscription = await liveQuery.client.subscribe(query);
subscription.on(LiveQueryEvent.delete, (value) {
print('*** DELETE ***: ${DateTime.now().toString()}\n $value ');
print((value as ParseObject).objectId);
print((value as ParseObject).updatedAt);
print((value as ParseObject).createdAt);
print((value as ParseObject).get('objectId'));
print((value as ParseObject).get('updatedAt'));
print((value as ParseObject).get('createdAt'));
});
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: [const Locale('pt', 'BR')],
home: Home()
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var _listTiles = List<String>();
Color _iconColor = Colors.black;
Color standardIconColor = Colors.black;
Color alternateIconColor = Colors.green;
TextEditingController _nameController = TextEditingController();
var _scaffoldKey = new GlobalKey<ScaffoldState>();
String standardTileTitle = "Adicione um horário disponível...";
String _titleTile = "Adicione um horário disponível...";
String _tileSubtitle = "Edite o nome do funcionário...";
int _selectedIndexBottomNavBar = 0;
final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>();
#override
Widget build(BuildContext context) {
return RefreshIndicator(
key: _refreshIndicatorKey,
onRefresh: () async {
setState(() {
});},
child: Scaffold(
key: _scaffoldKey,
floatingActionButton: FloatingActionButton(
onPressed: () {
invokeDatePicker();
},
child: Icon(Icons.add),
),
bottomNavigationBar: bottomNavigationBar(),
appBar: AppBar(
title: Text('Marca Horário'),
),
// body: Center(
// child: Text('Hello World'),
body: bodyStartScreen()
),
);
}
Widget bottomNavigationBar(){
void _onItemTapped(int index) {
setState(() {
_selectedIndexBottomNavBar = index;
});
print(_selectedIndexBottomNavBar);
if(_selectedIndexBottomNavBar == 2){
DatePicker.showDateTimePicker(context,
showTitleActions: true,
minTime: DateTime(2020, 1, 1),
maxTime: DateTime(2021, 12, 31),
onChanged: (date) {
print('change $date');
},
onConfirm: (date) {
print('confirm $date');
_listTiles.add(DateFormat.yMMMEd('pt_BR').add_Hm().format(date).toString());
_titleTile = DateFormat.yMMMEd('pt_BR').add_Hm().format(date).toString();
setState(() {
});
},
currentTime: DateTime.now(),
locale: LocaleType.pt);
}
}
return BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Funcionário',
),
BottomNavigationBarItem(
icon: Icon(Icons.access_time),
label: 'Marcar',
),
],
currentIndex: _selectedIndexBottomNavBar,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
);
}
Widget bodyStartScreen(){
return Column(
children: [
//the main title of the screen
Padding(
padding: EdgeInsets.all(16.0),
child: Text("Horários Possíveis",
style: TextStyle(
fontSize: 18.0
),
),
),
//gets available employees and datetimes from the server
FutureBuilder(builder: (context,snapshot){
if (snapshot.data != null) {
List<Data> dataList = snapshot.data;
return Expanded(
child: ListView.builder(
itemBuilder: (_, position) {
return Card(
child: ListTile(
title: Text(dataList[position].dateTime),
subtitle: Text(dataList[position].employee),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(icon: Icon(Icons.edit), onPressed: () {
//Show dialog box to update item
showUpdateDialog(dataList[position]);
}),
IconButton(icon: Icon(Icons.check_circle, color: Colors.green,), onPressed: () {
}),
//Show dialog box to delete item
IconButton(icon: Icon(Icons.delete), onPressed: () {
deleteData(dataList[position].objectId);
}),
],
),
),
);
},
itemCount: dataList.length,
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
future: getDataList(),
),
Divider(
color: Colors.black,
),
scheduleTile()
],
);
}
void invokeDatePicker(){
DatePicker.showDateTimePicker(context,
showTitleActions: true,
minTime: DateTime(2020, 1, 1),
maxTime: DateTime(2021, 12, 31),
onChanged: (date) {
print('change $date');
},
onConfirm: (date) {
print('confirm $date');
_listTiles.add(DateFormat.yMMMEd('pt_BR').add_Hm().format(date).toString());
_titleTile = DateFormat.yMMMEd('pt_BR').add_Hm().format(date).toString();
setState(() {
});
},
currentTime: DateTime.now(),
locale: LocaleType.pt);
}
void showUpdateDialog(Data data) {
_nameController.text = data.employee;
showDialog(context: context,
builder: (_) => AlertDialog(
content: Container(
width: double.maxFinite,
child: TextField(
controller: _nameController,
decoration: InputDecoration(
labelText: "Atualizar funcionário disponível",
),
),
),
actions: <Widget>[
FlatButton(onPressed: () {
Navigator.pop(context);
data.employee = _nameController.text;
updateData(data);
}, child: Text("Atualizar")),
FlatButton(onPressed: () {
Navigator.pop(context);
}, child: Text("Cancelar")),
],
)
);
}
Widget scheduleTile(){
return Padding(
padding: EdgeInsets.only(bottom: 80.0),
child: Card(
color: Colors.grey,
child: ListTile(
title: Text(_titleTile),
subtitle: Text(_tileSubtitle),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(
Icons.edit,
color: standardIconColor,
size: 20.0,
),
onPressed: () {
setState(() {
employeeAvailable();
});
},
),
IconButton(
icon: Icon(
Icons.check_circle_outline,
color: _iconColor,
size: 20.0,
),
onPressed: () {
setState(() {
(_titleTile != standardTileTitle) ? confirmSchedule() : fillTimeDialog();
});
},
)
],
),
),
),
);
}
void fillTimeDialog(){
showDialog(context: context,
builder: (_) => AlertDialog(
content: Container(
width: double.maxFinite,
child: Text("Insira o horário disponível!"),
),
actions: <Widget>[
FlatButton(onPressed: () {
Navigator.pop(context);
}, child: Text("OK")),
],
)
);
}
void employeeAvailable(){
showDialog(context: context,
builder: (_) => AlertDialog(
content: Container(
width: double.maxFinite,
child: TextField(
controller: _nameController,
decoration: InputDecoration(
labelText: "Funcionário",
),
),
),
actions: <Widget>[
FlatButton(onPressed: () {
Navigator.pop(context);
//addTodo();
setState(() {
_tileSubtitle = "Disponível: " + _nameController.text;
});
}, child: Text("Inserir")),
FlatButton(onPressed: () {
Navigator.pop(context);
setState(() {
_tileSubtitle = " ";
});
}, child: Text("Desfazer")),
],
)
);
}
void confirmSchedule(){
showDialog(context: context,
builder: (_) => AlertDialog(
content: Container(
width: double.maxFinite,
child: Text("Confirma disponibilidade?")
),
actions: <Widget>[
FlatButton(onPressed: () {
Navigator.pop(context);
//addTodo();
addData();
setState(() {
_iconColor = alternateIconColor;
_tileSubtitle = "Disponível: " + _nameController.text;
});
}, child: Text("Confirma")),
FlatButton(onPressed: () {
Navigator.pop(context);
setState(() {
_iconColor = standardIconColor;
_tileSubtitle = " ";
});
}, child: Text("Não")),
],
)
);
}
void addData() {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Row(
children: <Widget>[
Text("Adicionando informações..."),
CircularProgressIndicator(),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
duration: Duration(minutes: 1),
));
Data data = Data(employee: _tileSubtitle, dateTime: _titleTile);
DataUtils.addData(data)
.then((res) {
_scaffoldKey.currentState.hideCurrentSnackBar();
Response response = res;
if (response.statusCode == 201) {
//Successful
_nameController.text = "";
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Informações disponibilizadas!"), duration: Duration(seconds: 1),));
setState(() {
//Update UI
});
}
});
}
void deleteData(String objectId) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Excluindo disponibilidade..."),
CircularProgressIndicator(),
],
),
duration: Duration(minutes: 1),
),);
DataUtils.deleteData(objectId)
.then((res) {
_scaffoldKey.currentState.hideCurrentSnackBar();
Response response = res;
if (response.statusCode == 200) {
//Successfully Deleted
_scaffoldKey.currentState.showSnackBar(SnackBar(content: (Text("Disponibilidade excluída!")),duration: Duration(seconds: 1),));
setState(() {
});
} else {
//Handle error
}
});
}
void updateData(Data data) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Atualizando disponibilidade..."),
CircularProgressIndicator(),
],
),
duration: Duration(minutes: 1),
),);
DataUtils.updateData(data)
.then((res) {
_scaffoldKey.currentState.hideCurrentSnackBar();
Response response = res;
if (response.statusCode == 200) {
//Successfully Deleted
_nameController.text = "";
_scaffoldKey.currentState.showSnackBar(SnackBar(content: (Text("Disponibilidade atualizada!"))));
setState(() {
});
} else {
//Handle error
}
});
}
Future <List<Data>> getDataList() async{
List<Data> dataList = [];
Response response = await DataUtils.getDataList();
print("Code is ${response.statusCode}");
print("Response is ${response.body}");
if (response.statusCode == 200) {
var body = json.decode(response.body);
var results = body["results"];
for (var data in results) {
dataList.add(Data.fromJson(data));
}
} else {
//Handle error
}
return dataList;
}
}
data_utils.dart:
import 'dart:convert';
import 'package:http/http.dart';
import 'package:marca_horario/model/data.dart';
import 'package:marca_horario/constants.dart';
class DataUtils {
//static final String _baseUrl = "https://parseapi.back4app.com/classes/";
static final String _baseUrl = baseUrl;
//CREATE
static Future<Response> addData(Data data) async {
String apiUrl = _baseUrl + "Data";
Response response = await post(apiUrl,
headers: {
'X-Parse-Application-Id': kParseApplicationId,
'X-Parse-REST-API-Key': kParseRestApiKey,
'Content-Type': 'application/json'
},
body: json.encode(data.toJson()),
);
return response;
}
//READ
static Future getDataList() async{
String apiUrl = _baseUrl + "Data";
Response response = await get(apiUrl, headers: {
'X-Parse-Application-Id' : kParseApplicationId,
'X-Parse-REST-API-Key' : kParseRestApiKey,
});
return response;
}
//UPDATE
static Future updateData(Data data) async{
String apiUrl = _baseUrl + "Data/${data.objectId}";
Response response = await put(apiUrl, headers: {
'X-Parse-Application-Id' : kParseApplicationId,
'X-Parse-REST-API-Key' : kParseRestApiKey,
'Content-Type' : 'application/json',
},
body: json.encode(data.toJson())
);
return response;
}
//DELETE
static Future deleteData(String objectId) async{
String apiUrl = _baseUrl + "Data/$objectId";
Response response = await delete(apiUrl, headers: {
'X-Parse-Application-Id' : kParseApplicationId,
'X-Parse-REST-API-Key' : kParseRestApiKey,
});
return response;
}
}
Problem solved!
My problem was:import 'package:parse_server_sdk/parse_server_sdk.dart';
It needs to be replaced by:import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
and in pubspec.yaml it's necessary to use only the correspondent dependency:
parse_server_sdk_flutter: ^2.0.1
I am trying to download files from nodejs server. But when I implement onTap method on the gridview, it automatically runs the onTap function on start and every file starts downloading. I cannot figure out what am I doing wrong.Here is a preview of my code. I have implemented streambuilder to fetch the data.
GridView.builder(
padding: EdgeInsets.all(10),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 0.9),
itemCount: snapshot.data.data.length,
itemBuilder: (context, i) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue.withOpacity(0.3)),
child: Column(
children: <Widget>[
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage('assets/pdf_icon.png'))),
),
Divider(),
for (var items in snapshot.data.data[i].attachments)
ResourceDetail(
name: snapshot.data.data[i].title,
author: snapshot.data.data[i].user.name,
onTap: downloadFile(
'url/api/${items.source}',
snapshot.data.data[i].title,
items.extension),
),
],
),
);
},
);
Here is download file method.
Future<void> downloadFile(
String url, String fileName, String extension) async {
var dio = new Dio();
var dir = await getExternalStorageDirectory();
var downloadDir =
await new io.Directory('${dir.path}/downloads').create(recursive: true);
io.File('${downloadDir.path}/$fileName.$extension').exists().then((a) async {
print(a);
if (a) {
print("Opening file");
showDialog(
context: context,
builder: (_) {
return AlertDialog(
backgroundColor: Color(0xff5b8c85),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
title: Text('File is already downloaded'),
actions: <Widget>[
FlatButton(
child: Text(
'Open',
style: TextStyle(color: Colors.white),
),
onPressed: () {
OpenFile.open('${downloadDir.path}/$fileName.$extension');
Navigator.pop(context);
})
],
);
});
return;
} else {
print("Downloading file");
openDialog();
await dio.download(url, '${downloadDir.path}/$fileName.$extension',
onReceiveProgress: (rec, total) {
if (mounted) {
setState(() {
progressValue = (rec / total);
progressString = ((rec / total) * 100).toStringAsFixed(0) + "%";
myDialogState.setState(() {
myDialogState.progressData = progressString;
myDialogState.progressValue = progressValue;
});
});
}
});
if (mounted) {
setState(() {
print('${downloadDir.path}');
});
}
print("Download completed");
}
});
}
The ResourceDetails in your GridView.builder, try replacing the onTap to this
onTap: ()=>downloadFile(
'url/api/${items.source}',
snapshot.data.data[i].title,
items.extension)
i was trying to do image upload with dart/flutter with aws s3 bucket with presigned url via nodejs. i successfully generated the presigned url and send it back to front end but cant not make the put request over s3 with the file.if i am printing the statuscode i am getting a 400.
import 'dart:io';
import 'dart:convert';
import 'package:path/path.dart';
import 'package:async/async.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';
import 'package:mime/mime.dart';
import '../global.dart';
class AddAccount extends StatelessWidget {
Widget build(context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.grey
),
title: Text('Add Account', style: TextStyle(color: Colors.black54, fontSize: 20.0)),
backgroundColor: Colors.white,
),
body: addAccountBody(context),
);
}
Widget addAccountBody(context){
return ListView(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'email'
),
textCapitalization: TextCapitalization.characters,
),
TextField(
decoration: InputDecoration(
labelText: 'name'
),
textCapitalization: TextCapitalization.characters,
),
OutlineButton(
onPressed: (){
openImagePicker(context);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.camera_alt),
Text('add image')
],
),
)
],
);
}
void openImagePicker(BuildContext context){
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 80.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
onPressed: (){
getImage(context, ImageSource.camera);
},
icon: Icon(Icons.camera_alt),
),
SizedBox(width: 20.0,),
IconButton(
onPressed: () async {
File image = await getImage(context, ImageSource.gallery);
http.Response response = await http.get('$url1/api/upload', headers: {
"x-auth" : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1YzQ0M2M0NDE0NjkxODM3ZTQxNTMxZTgiLCJhY2Nlc3MiOiJhdXRoIiwiaWF0IjoxNTQ3OTc1NzQ5fQ.73_tyhu3vTpsnMncmjTS0xDBec08pScxpa35yRlLuzQ'
});
Map<String, dynamic> uploadUrl = json.decode(response.body);
final dataType = lookupMimeType(image.path).split("/");
final imageUploadRequest = http.MultipartRequest("PUT", Uri.parse(uploadUrl['url']));
final file = await http.MultipartFile.fromPath("${uploadUrl['key']}", image.path, contentType: MediaType(dataType[0], dataType[1]));
imageUploadRequest.files.add(file);
imageUploadRequest.fields['user'] = Uri.encodeComponent('user');
imageUploadRequest.headers['Content-Type'] = 'image/jpeg';
print(file.contentType);
try{
final streamedResponse = await imageUploadRequest.send();
final res = await http.Response.fromStream(streamedResponse);
print(res.statusCode);
}catch(e){
print(e);
}
},
icon: Icon(Icons.camera),
),
],
),
);
}
);
}
Future<File> getImage(BuildContext context, ImageSource sourse) async {
File file = await ImagePicker.pickImage(source: sourse, maxWidth: 400.0);
Navigator.pop(context);
return file;
}
}
flutter code
const AWS = require('aws-sdk');
const uuid = require('uuid/v1');
const keys = require('../config/keys');
const { authenticate } = require('../middleware/authenticate')
const s3 = new AWS.S3({
accessKeyId: keys.accessKeyId,
secretAccessKey: keys.secretAccessKey
});
module.exports = (app) => {
app.get('/api/upload', authenticate, (req,res) => {
console.log(req.user.id);
const key = `${req.user.id}/${uuid()}.jpeg`;
s3.getSignedUrl('putObject', {
Bucket: 'flutter-bucket',
ContentType: 'image/jpeg',
Key: key
}, (err, url) => {
res.send({key, url});
})
});
}
node code
S3 Presigned URLs require raw bytes as the body, not multipart files. Thus, I used the following code:
List<int> content = await file.readAsBytes();
var streamed = http.StreamedRequest("PUT", Uri.parse(url));
streamed.headers["Content-Type"] = mimeType;
streamed.headers["Content-Length"] = "${content.length}";
streamed.sink.add(content);
streamed.sink.close();
var response = await streamed.send();