Flutter 如何从 Firestore 中获取已定位的图像？

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 Berkan希望引起更多人对这个问题的关注。

我已经从 Firestore 获取背景图片和标题数据，但无法在 Positioned 中获取图片。 这就是我要的：

我已经有了这个final Query query = FirebaseFirestore.instance.collection("1doga"); 像这样获取卡片背景图像：

decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(9.6),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: CachedNetworkImageProvider(
                                  querySnapshot.docs[index].data()['image'],
                                  maxHeight: 200,
                                  maxWidth: 200),
                            ),
                          ),

重点是，我无法从 Firestore 添加图像：

Positioned(
                                bottom: 19.2,
                                left: 19.2,
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(4.8),
                                  child: BackdropFilter(
                                    filter: ImageFilter.blur(
                                        sigmaY: 19.2, sigmaX: 19.2),
                                    child: Container(
                                      height: 26,
                                      padding: EdgeInsets.only(
                                          left: 0.0, right: 0.0),
                                      alignment: Alignment.centerLeft,
                                      child: Row(
                                        children: <Widget>[
                                          SizedBox(
                                            width: 9.52,
                                          ),
                                          SvgPicture.asset(
                                              'assets/svg/icon_location.svg'),
                                          SizedBox(
                                            width: 9.52,
                                          ),
                                          SvgPicture.asset(
                                            'assets/svg/icon_location.svg',
                                            height: 50,
                                          ),
                                          SizedBox(
                                            width: 9.52,
                                          ),
                                          SvgPicture.asset(
                                              'assets/svg/icon_location.svg'),
                                          SizedBox(
                                            width: 9.52,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),

我需要更改"SvgPicture.asset( 'assets/svg/icon_location.svg')"并从 Firestore 添加图像，但我不知道如何。

Answer 1

使用此插件处理网络提供的图像 cached_network_image: ^3.0.0

https://pub.dev/packages/cached_network_image

CachedNetworkImage(
                        
                        height: 40,
                        width: 40,
                        fit: BoxFit.cover,
                        imageUrl: imageNetwork,
                        placeholder: (context, url) =>
                            CircularProgressIndicator(
                          valueColor:
                              AlwaysStoppedAnimation<Color>(Colors.white),
                          backgroundColor: const Color(0xFF02204c),
                        ),
                        errorWidget: (context, url, error) => Center(
                          child: Image.asset(
                            'assets/images/img.png',
                            height: 60,
                            width: 60,
                          ),
                        ),
                      )),

Answer 2

使用 Elvis Salabarria 的响应，您可以在代码中执行类似的操作

         Positioned(
                                bottom: 19.2,
                                left: 19.2,
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(4.8),
                                  child: BackdropFilter(
                                    filter: ImageFilter.blur(
                                        sigmaY: 19.2, sigmaX: 19.2),
                                    child: Container(
                                      height: 26,
                                      padding: EdgeInsets.only(
                                          left: 0.0, right: 0.0),
                                      alignment: Alignment.centerLeft,
                                      child: Row(
                                        children: <Widget>[
                                          getImage(firebaseUrl),
                                          getImage(firebaseUrl, 50),
                                          getImage(firebaseUrl, 50),                                          
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),

// 管理变更的方法

Widget getImage(String urlFirebase, int? size) {
            return Column(
               children: [
                 CachedNetworkImage(                        
                        height: 40,
                        width: 40,
                        fit: BoxFit.cover,
                        imageUrl: urlFirebase,
                        placeholder: (context, url) => size != null?
                            SvgPicture.asset(
                                              'assets/svg/icon_location.svg',
                                               height: size,
                       )
                       : SvgPicture.asset(
                                              'assets/svg/icon_location.svg',                                               
                       )
,
                        errorWidget: (context, url, error) => Center(
                          child: Image.asset(
                            'assets/images/img.png',
                            height: 60,
                            width: 60,
                          ),
                        ),
                      )),
                     SizedBox(width: 9.52),

                   ]
              )

}