I'm building edit screen where user can change Image. I would like user to display one of three images: - image from server - temporary image if previously not uploaded - new image to upload.
Problem appear when I'm going to display image from server. With use of future builder it's possible to display image but new image cannot be uploaded. If I'm not using future builder I get error
future is not subtype of type ImageProvider
My avatar for displaying images
CircleAvatar(
radius: MediaQuery.of(context).size.width / 6,
backgroundColor: Colors.grey,
backgroundImage: getImage(),
),
getImage()
getImage() {
if (_image != null) {
if (uploadCounter == 0) {
uploadImage();
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
backgroundColor: Colors.lightBlue[900],
content: Container(
child: Text('Uploading...'),
),
);
}
return FileImage(_image);
} else {
return _emptyImage;
}
}
And my upload image
uploadImage() async {
if (_image == null) {
showAlertDialog(
context: context,
title: "Error Uploading!",
content: "No Image was selected.");
return;
} else {
setState(() {
uploadStatus = true;
});
final preffs = await SharedPreferences.getInstance();
final token = preffs.getString('token');
final id = preffs.getString('id');
var uri = Uri.parse('http://10.0.2.2:8000/profiles/update/');
var request = http.MultipartRequest('PUT', uri)
..fields['id'] = id
..headers.addAll({"Authorization": token})
..files.add(await http.MultipartFile.fromPath('image_1', _image.path));
var response = await request.send();
if (response.statusCode == 200) {
print('Uploaded!');
print(response);
}
setState(
() {
uploadStatus = false;
uploadCounter = 1;
},
);
}
}
I was trying to get image from server trough future builder or to save image before entering this screen then reload it from file, but saving files in flutter is not best solution I think
The only solution works at the moment looks like this.
If I put second CircleAvatar in return of if-else I get some problems Like no photo just gray Image etc, problem with upload photo.