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),

                   ]
              )

}