How to create horizontal ListView.builder

Question

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

add width: MediaQuery.of(context).size.width to your sizedbox — Jim, Jan 04 '21 at 03:48

score 1 · Answer 1 · answered Jan 04 '21 at 08:04

1

Use pageview.builder instead :

Container(
  height: MediaQuery.of(context).size.height / 3,
  width: MediaQuery.of(context).size.width,
    child: PageView.builder(
          pageSnapping: false,
          physics: PageScrollPhysics(),
          controller: _pageController,
           scrollDirection: Axis.horizontal,
           itemCount:
                 _articleController.articleListDat.length,
            itemBuilder: (context, index) {
               return Container();
}

And pagecontroller

PageController _pageController = PageController(initialPage: 2, viewportFraction: 0.9);

answered Jan 04 '21 at 08:04

mkju

83
1
6

Thank you sir, i already used PageView.builder but the problem with that is when i use ```if(snapshot.connectionState == ConnectionState.waiting) return SpinKitDoubleBounce(color: kPrimaryColor);``` to show CircularProgressIndicator until the data load and when i swipe to 2nd index it refresh again and move to 1st index – Muhammad Shafique Jan 04 '21 at 08:58
can you add exact design ? for me it worked .will provide full code for your design – mkju Jan 04 '21 at 09:30
bro i think the problem is in my design otherwise listview works fine. Can you please provie code for my design – Muhammad Shafique Jan 04 '21 at 09:34

score 0 · Answer 2 · answered Jan 04 '21 at 04:36

0

First wrap your ListView.builder into LimitedBox / container then set height on it. Then add

scrollDirection: Axis.horizontal,

It's Done

answered Jan 04 '21 at 04:36

Dwi Kurnianto M

427
3
6

hmm, try to remove SingleChildScrollView btw. ListView.builder have builtin scroll ability – Dwi Kurnianto M Jan 04 '21 at 04:52
Let me know if it's filled your expectation. – Dwi Kurnianto M Jan 04 '21 at 04:53
there are some issues with your ListView Builder descendant, I always using listView.builder for the horizontal list, there is no problem at all if you do it correctly. Try to use DartDev tools to inspect your Widget Trees, I am sure that is something wrong with your ListView Builder descendant. Try to locate and fix their constraints – Dwi Kurnianto M Jan 04 '21 at 07:07
Ah !, I think here is your problem. Column crossAxisAlignment: CrossAxisAlignment.stretch you are trying to create a horizontal list view while This dude is trying to stretch, then your layout must be not laid out. It means your child trying to have a width infinity and beyond, while their parent tries to wrap its children on expandable horizontal scroll view width – Dwi Kurnianto M Jan 04 '21 at 07:08

How to create horizontal ListView.builder

2 Answers2