Flutter 错误：参数无效：URI 实例%20of%20'Future%3CString%3E' 中未指定主机

Question

我正在尝试从 FirebaseFirestore 检索字符串 url。

我的UI代码如下

Container(
                                                  height: 65,
                                                  width: 65,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(
                                                          width: 8,
                                                          color: const Color
                                                              .fromARGB(
                                                              255, 3, 54, 95)),
                                                      shape: BoxShape.circle,
                                                      color: Colors.black38),
                                                  child: ClipRRect(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            22),
                                                    child: CachedNetworkImage(
                                                      imageUrl:
                                                          model.photoUrl,
                                                      fit: BoxFit.cover,

代码尝试从提供程序文件访问变量，如下所示：

 photoUrl = AuthMethods().getPhotoUrl().toString();

//Auth方法文件

Future<String> getPhotoUrl() async {
    DocumentSnapshot snap = await FirebaseFirestore.instance
        .collection('users')
        .doc(FirebaseAuth.instance.currentUser!.uid)
        .get();

final String photoUrl = (snap.data() as Map<String, dynamic>)['photoUrl'];
return photoUrl;
// return photoUrl;

}

Answer 1

getPhotoUrl()

是一个异步函数，需要等待。它只能工作如果而不是

photoUrl = AuthMethods().getPhotoUrl().toString();

你改为写

photoUrl = await AuthMethods().getPhotoUrl();

虽然这只能像在另一个你可能没有的异步中那样调用

Answer 2

异步数据检索：

getPhotoUrl

是一个异步函数，这意味着它返回一个

Future

。您分配

photoUrl

的行不会等待那个未来，因此出现了问题。

提供程序/模型更新：如果您使用提供程序或任何状态管理解决方案，请确保在更新时通知侦听器

photoUrl

，以便使用新数据重建 UI。

使用 FutureBuilder：由于您正在处理异步数据检索，请考虑使用

FutureBuilder

来更好地处理未来状态。

具体操作方法如下：

在您的用户界面（您要显示图像的位置）中：

FutureBuilder<String>(
  future: AuthMethods().getPhotoUrl(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        // Return an error widget or something else if the Future fails
        return Text('Error: ${snapshot.error}');
      }
      // Once the Future is complete and no errors occurred,
      // display the created image
      return Container(
        height: 65,
        width: 65,
        decoration: BoxDecoration(
          border: Border.all(width: 8, color: const Color.fromARGB(255, 3, 54, 95)),
          shape: BoxShape.circle,
          color: Colors.black38,
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(22),
          child: CachedNetworkImage(
            imageUrl: snapshot.data!,
            fit: BoxFit.cover,
          ),
        ),
      );
    } else {
      // While the Future is running, show a loading indicator
      return CircularProgressIndicator();
    }
  },
)

在您的 AuthMethods 中：

确保在文档中不存在

photoUrl

或在获取过程中出现任何其他问题时进行错误处理。

通过此设置，

FutureBuilder

将处理异步函数的生命周期。它将在获取数据时显示加载指示器，在获取数据后显示图像，或者在发生错误时进行处理。

Answer 3

在使用您的Url之前，您可以通过检查来调用您的Container，以避免异步数据拉取问题。例如：

Widget get customImage {
    return renderUrl == null ?
      Container() :
      Container(
        width: 100.0,
        height: 100.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(renderUrl),
          ),
        ),
      );
  }

替代方案：

在您的 uri 之前添加 https://

您还可以查看此答案：无效参数：URI 中未指定主机 - Image.network

我希望我有所帮助。享受你的工作。