时间戳

首页 > 解决方案 > 在从云 Firestore 数据库中检索主图像之前，如何在 CircleAvatar 中放置虚拟图像？

firebase - 在从云 Firestore 数据库中检索主图像之前，如何在 CircleAvatar 中放置虚拟图像？

问题描述

在 CircleAvatar 中放置一个虚拟图像。虚拟图像被从 Cloud Firestore 数据库中获取的主图像替换。

在这里，我正在尝试制作包含 User-Profile 的 Profile-image，因为我使用了 CircleAvatar，它将在其中存储图像。图像检索做得很好并且工作正常。但是现在我混淆了一些“问题”，如果从技术上讲，配置文件 URL 没有保存在 firestore 数据库中，那么它将引发错误。因此，为了停止防止错误，我需要使用虚拟图像，它将被从云 Firestore 数据库中获取的主图像替换。

现在问：- 如何将虚拟图像放置在 CircleAvatar 中，并且该虚拟图像被主图像替换

class DetailPage extends StatefulWidget {
  final DocumentSnapshot post;
  DetailPage({this.post});

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      backgroundColor: Colors.white,
      body:
         Form(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              SizedBox(
                height: 20.0,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Align(
                    alignment: Alignment.center,
                    child: CircleAvatar(
                      radius:73 ,
                      backgroundColor: Colors.blue,
                      child: ClipOval(
                        child: new SizedBox(
                          width: 125,
                          height:125,
                          child: Image.network(widget.post.data['image'],height: 108,fit: BoxFit.fill,),

                        ),
                        ),
                      ),
                    ),
                ],
              ),

 ],
          ),
        ),
    );
  }
}

标签： firebaseflutterdartgoogle-cloud-firestore

解决方案

你可以看看这个。这支持您需要的功能。

https://pub.dev/packages/cached_network_image

您可以将任何小部件放在占位符中。它还支持错误指标

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

推荐阅读