如何在Flutter中用图像提供器展示未来图像

qmelpv7a  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我正在构建编辑屏幕,用户可以在其中更改图像。我希望用户显示三个图像之一:- 来自服务器的图像-先前未上传的临时图像-要上传的新图像。
当我要从服务器显示图像时出现问题。使用未来的构建器可以显示图像,但无法上传新图像。如果我不使用未来的构建器,则会出现错误
future不是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;
        },
      );
    }
  }

我试图从服务器获得图像通过未来的建设者或进入此屏幕之前保存图像,然后从文件重新加载,但保存文件在Flutter不是最好的解决方案,我认为

gmol1639

gmol16391#

目前唯一有效的解决方案是这样的。

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的回报,如果我得到一些问题,如没有照片只是灰色图像等,上传照片的问题。

相关问题