How to create horizontal ListView.builder

Hey there i want to make horizontal ListView.builder but it shows error that 'BoxConstraints forces and infinite width'. Actually i want to make a 'Buyer Request' page like Fiverr. I achieved my goal using PageView.builder but when i use

if(snapshot.connectionState == ConnectionState.waiting)  return SpinKitDoubleBounce(color: kPrimaryColor);  

it brings me back to 1st index whenever i swipe to next index.

So i want to use ListView.builder instead. Here is my code: (Hope someone will solve my problem)

if (snapshot.hasData)              return SizedBox(                child: ListView.builder(                  // scrollDirection: Axis.horizontal,                  itemCount: indexLength,                  controller: PageController(viewportFraction: 1.0),                  // onPageChanged: (int index) => setState(() => _index = index),                  itemBuilder: (_, i) {                    return SingleChildScrollView(                      child: Card(                        margin: EdgeInsets.all(10),                        child: Wrap(                          children: <Widget>[                            ListTile(                              leading: CircleAvatar(                            backgroundColor: kPrimaryColor.withOpacity(0.8),                            backgroundImage: AssetImage('assets/images/nullUser.png'),                            child: snapshot.data[i]['PhotoURL'] != null                                ? ClipRRect(                                    borderRadius: BorderRadius.circular(50),                                    child:                                        Image.network(snapshot.data[i]['PhotoURL'],                                        width: 50,                                          height: 50,                                          fit: BoxFit.cover,),                                  )                                : ClipRRect(                                    borderRadius: BorderRadius.circular(50),                                    child:                                        Image.asset('assets/images/nullUser.png',                                        width: 50,                                          height: 50,                                          fit: BoxFit.cover,),                                  )                          ),                              title: Text(                                snapshot.data[i]['Email'],                                style: TextStyle(                                  fontSize: 16,                                  fontWeight: FontWeight.w700,                                  color: Colors.black.withOpacity(0.7),                                ),                              ),                              subtitle: Text(                                snapshot.data[i]['Time'],                                style: TextStyle(                                    color: Colors.black.withOpacity(0.6)),                              ),                            ),                            Padding(                              padding: const EdgeInsets.all(16.0),                              child: Column(                                crossAxisAlignment: CrossAxisAlignment.stretch,                                children: [                                  Container(                                    decoration: BoxDecoration(                                      borderRadius:                                          BorderRadius.all(Radius.circular(5)),                                      color: Colors.grey[200],                                    ),                                    padding: EdgeInsets.all(10),                                    child: Text(                                      snapshot.data[i]['Description'],                                      style: TextStyle(                                          color: Colors.black.withOpacity(0.6)),                                    ),                                  ),                                  SizedBox(                                    height: 8,                                  ),                                  Container(                                    decoration: BoxDecoration(                                        borderRadius:                                            BorderRadius.all(Radius.circular(5)),                                        border:                                            Border.all(color: Colors.grey[300])),                                    child: ListTile(                                      leading: Icon(Icons.category_outlined),                                      title: Text(                                        'Category : ${snapshot.data[i]['Category']}',                                        style: TextStyle(                                          fontSize: 14,                                          color: Colors.grey,                                        ),                                      ),                                    ),                                  ),                                  SizedBox(height: 8),                                  Container(                                    decoration: BoxDecoration(                                        borderRadius:                                            BorderRadius.all(Radius.circular(5)),                                        border:                                            Border.all(color: Colors.grey[300])),                                    child: ListTile(                                      leading: Icon(Icons.location_pin),                                      title: Text(                                        snapshot.data[i]['Location'],                                        style: TextStyle(                                          fontSize: 14,                                          color: Colors.grey,                                        ),                                      ),                                    ),                                  ),                                  SizedBox(height: 8),                                  Container(                                    decoration: BoxDecoration(                                        borderRadius:                                            BorderRadius.all(Radius.circular(5)),                                        border:                                            Border.all(color: Colors.grey[300])),                                    child: ListTile(                                      leading: Icon(                                        Icons.attach_money,                                        color: kGreenColor,                                      ),                                      title: Text(                                        'Budget : Rs.${snapshot.data[i]['Budget']}',                                        style: TextStyle(                                          fontSize: 14,                                          color: kGreenColor,                                        ),                                      ),                                    ),                                  ),                                  SizedBox(height: 8),                                  Container(                                    decoration: BoxDecoration(                                        borderRadius:                                            BorderRadius.all(Radius.circular(5)),                                        border:                                            Border.all(color: Colors.grey[300])),                                    child: ListTile(                                      leading: Icon(Icons.timer),                                      title: Text(                                        'Duration : ${snapshot.data[i]['Duration']}',                                        style: TextStyle(                                          fontSize: 14,                                          color: Colors.grey,                                        ),                                      ),                                    ),                                  ),                                  SizedBox(                                    height: 35,                                  ),                                  sendOfferButton(),                                  SizedBox(                                    height: 15,                                  ),                                  Center(                                    child: Text(                                      "${i + 1}/$indexLength",                                      style: TextStyle(fontSize: 13),                                    ),                                  ),                                ],                              ),                            ),                          ],                        ),                      ),                    );                  },                ),              );  

If anyone want to see full file. Check it Here

https://stackoverflow.com/questions/65557196/how-to-create-horizontal-listview-builder January 04, 2021 at 11:05AM