Flutter How to get images in Positioned from Firestore?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Berkan wants to to this question. 。

I already geting background image, title data from Firestore but i couldn't get image in Positioned. This is what i want:

I already have this final Query query = FirebaseFirestore.instance.collection("1doga"); Getting cards background images like this:

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

Here is the point, i can't add image from 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,
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),

I need to change "SvgPicture.asset( 'assets/svg/icon_location.svg')" this and add images from Firestore but i don't know how.

Answer 1

use this plugin to work with images provided by the network 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

Using the response of Elvis Salabarria, you can do something like that in your code

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

// Method to manage the change

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

                   ]
              )

}