How to display future image with image provider in flutter

661 Views Asked by At

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

1

There are 1 best solutions below

0
On

The only solution works at the moment looks like this.

FutureBuilder<Profile>(
                      future: profileService.getProfile(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          profile = snapshot.data;
                          return CircleAvatar(
                            radius: MediaQuery.of(context).size.width / 6,
                            backgroundColor: Colors.grey,
                            backgroundImage: Image.network(
                                    "http://10.0.2.2:8000/" +
                                        profile.image_1.toString())
                                .image,
                          );
                        } else {
                          return Container();
                        }
                      }),
                  CircleAvatar(
                    radius: 0.1,
                    backgroundColor: Colors.grey,
                    backgroundImage: getImage(),
                  ),

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.