Solved: Flutter How to get images in Positioned from Firestore?

Question

Asked by Berkan on December 09, 2021 (source).

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

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. Full of my codes:

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: 60,
                      width: 60,
                  )
                  : SvgPicture.asset(
                    'assets/svg/icon_location.svg',
                      height: 60,
                      width: 60,                                               
                  ),
                    errorWidget: (context, url, error) => Center(
                    child: Image.asset(
                    'assets/images/img.png',
                      height: 60,
                      width: 60,
                    ),
                  ),
                ),                
                    const SizedBox(width: 9.52),
                   ]
              );
}

  /// Page Controller

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: const Icon(Icons.arrow_back_ios_new_sharp),
        ),
        title: SizedBox(
          width: 170,
          child: Image.network(
            'https://i.hizliresim.com/sf4kbvu.jpg',
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.cloud_queue_outlined),
          ),
        ],
      ),
      drawer: NavDrawer(),
      body: SafeArea(        
          child: StreamBuilder(
            stream: query.snapshots(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              } else if (snapshot.hasError) {
                return const Center(
                  child: Icon(Icons.error),
                );
              }
              final QuerySnapshot<Map<String, dynamic>> querySnapshot =
snapshot.data as QuerySnapshot<Map<String, dynamic>> ;
              return ListView(
                physics: const BouncingScrollPhysics(),
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
                    height: 724.8,
                    child: ListView.builder(
                      itemCount: querySnapshot.size,
                      padding: const EdgeInsets.only(left: 28.8, right: 12),
                      scrollDirection: Axis.vertical,
                      physics: const BouncingScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          height: 214.8,
                          width: 188.4,
                          margin: const EdgeInsets.only(right: 16.8, bottom: 50),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(9.6),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: CachedNetworkImageProvider(
                                  querySnapshot.docs[index].data()['image'],
                                  maxHeight: 200,
                                  maxWidth: 200),
                            ),
                          ),
                          child: Stack(
                            children: <Widget>[
                              GestureDetector(
                                  onTap: () => gotoPage(querySnapshot
                                      .docs[index]
                                      .data()['title'])),
                              /*  Navigator.push(
                                      context,
                                      CupertinoPageRoute(
                                          builder: (redContext) => MyApp()));*/

                                           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: const EdgeInsets.only(
                                          left: 0.0, right: 0.0),
                                      alignment: Alignment.centerLeft,
                                      child: Row(
                                        children: <Widget>[
                                          getImage(firebaseUrl),
                                          getImage(firebaseUrl, 50),
                                          getImage(firebaseUrl, 50),                                          
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ),                           
                              Align(
                                alignment: Alignment.center,
                                child: Container(
                                  margin: const EdgeInsets.all(20),
                                  child: Text(
                                    querySnapshot.docs[index].data()['tr'],
                                    style: const TextStyle(
                                        fontSize: 35,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  )
                ],
              );
            },
          ),        
      ),
    );
  }
}

Answer

Question answered by Alejandro C (source).

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

                   ]
              )

}
DART FIREBASE FLUTTER GOOGLE-CLOUD-FIRESTORE
SHARE: