如何在不重建的情况下渲染 Firebase 中的图像？

Question

我正在尝试使用 Firebase 存储在我的 flutter 应用程序中实现配置文件图像选择。 我使用 image_picker 获取图像并将其上传到 Firebase，获取下载链接并将下载链接添加到云 firestore 中的imgsrc字段，从那里我可以渲染 NetworkImage。

Center(
          child: Stack(
            children: [
              buildImage(),
              Positioned(
                bottom: 5,
                right: 5,
                child: GestureDetector(
                    onTap: showPhotoAlertDialog,
                    child: buildEditIcon(Color(0xff407bff))),
              ),
            ],
          ),
        ),

当用户没有个人资料图像时，如何获取默认的Icons.person类型图像，否则如何从数据库中获取图像？ 我现在使用的代码如下：

Widget buildImage() {
    return CircleAvatar(
      backgroundImage: NetworkImage(loggedInUser.imgsrc ??
          'https://th.bing.com/th/id/R.945f33b643f2ceffcdae90fb57c61854?rik=XcI0SYBgSefoCA&riu=http%3a%2f%2fgetdrawings.com%2ffree-icon-bw%2fanonymous-avatar-icon-19.png&ehk=5n%2buJG66CeLQZsmhaMt8gag5rXuM3TdebAL6W35K1E4%3d&risl=&pid=ImgRaw&r=0'),
      backgroundColor: Colors.grey[350],
      radius: 100,
    );
  }

我创建了一个警报对话框小部件来选择是从相机还是从图库中选择图像。

showPhotoAlertDialog() {
    AlertDialog alert = AlertDialog(
      title: Text("Upload from"),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextButton(
            onPressed: () {
              imageFromCamera()
                  .then((value) => uploadFile())
                  .whenComplete(() => postSource());
              setState(() {});                               ----->
            },
            child: Text("Upload from camera"),
          ),
          TextButton(
            onPressed: () {
              imageFromGallery().then((value) => uploadFile());
              postSource();
              setState(() {});
            },
            child: Text("Upload from gallery"),
          )
        ],
      ),
    );

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

要将图像上传到存储并将源发布到云 firestore，我使用以下方法：

Future uploadFile() async {
    if (file == null) return;

    final fileName = path.basename(file!.path);
    final destination = 'files/$fileName';

    task = FirebaseApi.uploadFile(destination, file!);
    setState(() {});

    if (task == null) return;

    final snapshot = await task!.whenComplete(() {});
    urlDownload = await snapshot.ref.getDownloadURL();

    print('Download-Link: $urlDownload');
  }

  postSource() async {
    FirebaseFirestore firebaseFirestore = FirebaseFirestore.instance;

    await firebaseFirestore
        .collection("users")
        .doc(user?.uid)
        .update({'imgsrc': urlDownload});
  }

链接已正确上传，我可以在我的NetworkImage中获取链接，但不会立即呈现。 我必须关闭父抽屉并再次打开它才能得到它。 我在发布源代码后也调用了setState(){} ，但这没有任何区别。 如何在不必关闭和打开抽屉的情况下获取图像？

任何帮助，将不胜感激！ 谢谢

Answer 1

您还必须在 model class 或此 imgsrc 中更新图像，也只需在 TextButton 的 onPressed 中的 setState 上方添加此行。

loggedInUser.imgsrc = urlDownload;