I was trying to show my products in the homepage by taking from firestore collections and show it using StreamBuilder. but what my homescreen shows is its returning 'hihihihi'. ihave used the correct collection reference with the correct field name

Your help in this case will help a beginner flutter developer to complete his university project Thanks

here is my code

    Container(
                height: 190,
                child: StreamBuilder(
                    stream: collectionReference.snapshots(),
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                            scrollDirection: Axis.horizontal,
                            padding: EdgeInsets.only(left: 16, right: 6),
                            itemCount: 4,
                            itemBuilder: (context, index) {
                              children:
                              snapshot.data!.docs.map(
                                (e) => Container(
                                  margin: EdgeInsets.only(right: 10),
                                  height: 199,
                                  width: 344,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(28),
                                    color: Colors.white,
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.grey,
                                        offset: Offset(0.0, 1.0), //(x,y)
                                        blurRadius: 6.0,
                                      ),
                                    ],
                                  ),
                                  child: Stack(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Positioned(
                                          child: Image(
                                            image: AssetImage(
                                              'assets/item1.png',
                                            ),
                                            height: 200,
                                          ),
                                        ),
                                      ),
                                      Positioned(
                                        right: 20,
                                        top: 10,
                                        child: Text(
                                          e['name'],
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 25,
                                              fontFamily: 'Poppins',
                                              fontWeight: FontWeight.bold),
                                        ),
                                      ),
                                    
                                      Positioned(
                                        right: 20,
                                        bottom: 10,
                                        child: Text(
                                          e['price'],
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 30,
                                              fontFamily: 'Poppins'),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                              return Center(child: Text('hi'));
                            });
                      }
                      return Center(child: Text('Empty'));
                    }),
              ),

CodePudding user response：

The problem is that the itemBuilder should return how every item in the ListView will be built. Currently what you do is map the entire snapshot and then return a plan Text widget with hi in it. Try the code below for the itemBuilder:

itemBuilder: (context, index) {
    final e = snapshot.data!.docs[index];
    return Container(
      margin: EdgeInsets.only(right: 10),
      height: 199,
      width: 344,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(28),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            offset: Offset(0.0, 1.0), //(x,y)
            blurRadius: 6.0,
          ),
        ],
      ),
      child: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Positioned(
              child: Image(
                image: AssetImage(
                  'assets/item1.png',
                ),
                height: 200,
              ),
            ),
          ),
          Positioned(
            right: 20,
            top: 10,
            child: Text(
              e['name'],
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 25,
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.bold),
            ),
          ),
        
          Positioned(
            right: 20,
            bottom: 10,
            child: Text(
              e['price'],
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 30,
                  fontFamily: 'Poppins'),
            ),
          ),
        ],
      ),
    );
}

Also keep in mind that your itemCount is 4 and you probably want is to be:

itemCount: snapshot.data!.docs.length