Как отобразить будущее изображение с поставщиком изображений в флаттере

Question

Я создаю экран редактирования, где пользователь может изменить изображение. Я хотел бы, чтобы пользователь отображал одно из трех изображений: - изображение с сервера - временное изображение, если оно ранее не было загружено - новое изображение для загрузки.

Проблема возникает, когда я собираюсь отображать изображение с сервера. С помощью Future Builder можно отображать изображение, но нельзя загрузить новое изображение. Если я не использую Future Builder, я получаю сообщение об ошибке

будущее не является подтипом типа ImageProvider

Моя аватарка для показа изображений

                            CircleAvatar(
                        radius: MediaQuery.of(context).size.width / 6,
                        backgroundColor: Colors.grey,
                        backgroundImage: 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;
    }
  }

и мое загружаемое изображение

      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;
        },
      );
    }
  }

Я пытался получить изображение с сервера через будущий конструктор или сохранить изображение перед входом на этот экран, а затем перезагрузить его из файла, но сохранение файлов во флаттере - не лучшее решение, я думаю

Answer 1

Единственное решение, которое работает на данный момент, выглядит так.

      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(),
                  ),

Если я поставлю второй CircleAvatar взамен if-else, у меня возникнут некоторые проблемы. Например, нет фотографии, просто серое изображение и т. Д., Проблема с загрузкой фотографии.