I cant upload my image file to server (Flutter-API) - image

Question

I made a form in my apps, but the image field didn't parse any image to server. I use image picker from gallery.
This is my get image code from gallery:
Future getImageFromGallery() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
and this is my body apps code with text field and image picker from gallery:
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: new TextFormField(
maxLines: 3,
decoration: new InputDecoration(
labelText: "Keterangan"),
onSaved: (String val) => description = val,
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: SizedBox(
width: 100.0,
height: 100.0,
child: RaisedButton(
child: _image == null
? Icon(Icons.add_a_photo)
: Image.file(_image),
onPressed: () {
this.getImageFromGallery();
},
),
),
),
Padding(
padding: const EdgeInsets.only(top: 40.0),
child: RaisedButton(
child: Text("Submit"),
color: Colors.blue,
onPressed: () {
newPost();
},
And this is my newPost method :
void newPost() async {
Map data = {
"destination": destination,
"start": start,
"finish": finish,
"person": person,
"route": route,
"descrption": description,
"image": image
};
var body = json.encode(data);
String token = await getToken();
var response = await http.post('https://api-wisapedia.herokuapp.com/posts/',
headers: {HttpHeaders.authorizationHeader: 'Bearer $token'},
body: body);
_newPostResponse =
NewPostResponse.fromJson(json.decode(response.body.toString()));
if (token != null) {
if (destination.isEmpty ||
start.isEmpty ||
finish.isEmpty ||
person.isEmpty ||
route.isEmpty ||
description.isEmpty ||
image.isEmpty) {
showDialog(
builder: (context) => AlertDialog(
content: Text('Please fill the form'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('OK'),
)
],
),
context: context);
} else {
_formkey.currentState.save();
Navigator.push(
context, MaterialPageRoute(builder: (context) => MainScreen()));
}
} else {
showDialog(
builder: (context) => AlertDialog(
content: Text('You need to authenticate'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('$token'),
)
],
),
context: context);
}
}
There is onSaved method in text field that makes values of this field can be uploaded by API, but there isn't onSaved method for image. I'm confused is : Image.file(_image) have a same role as onSaved or not? Then when I run this code, I don't know why but the image non uploaded. how can I solve this problem?

Answer 1

I think you should await your function, since it's returning a Future. Something like this:
onPressed: () async {
await this.getImageFromGallery();
},