Problem to separate listView.Builder into two lines

Question

I've been trying to modify my flutter code to display product-categories on two lines. In the current model, you can view the categories without any problem by dragging them to the side (only one line). However, for ease of future customer-viewer, I would like to split it into two lines.

my current ListView.builder displays like this: Click Here

I would like it to display as follows: Click Here

Here is my code:

           Row(
          children: [
            Expanded(
              child: SizedBox(
                height: 80,
                child: category.categoryList != null ? category.categoryList.length > 0 ? ListView.builder(
                  itemCount: category.categoryList.length,
                  padding: EdgeInsets.only(left: Dimensions.PADDING_SIZE_SMALL),
                  physics: BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: EdgeInsets.only(right: Dimensions.PADDING_SIZE_SMALL),
                      child: InkWell(
                        onTap: () => Navigator.pushNamed(context, Routes.getCategoryRoute(
                          category.categoryList[index].id, category.categoryList[index].image,
                          category.categoryList[index].name.replaceAll(' ', '-'),
                        )),
                        child: Column(children: [
                          ClipOval(
                            child: FadeInImage.assetNetwork(
                              placeholder: Images.placeholder_image,
                              image: Provider.of<SplashProvider>(context, listen: false).baseUrls != null
                                  ? '${Provider.of<SplashProvider>(context, listen: false).baseUrls.categoryImageUrl}/${category.categoryList[index].image}':'',
                              width: 65, height: 65, fit: BoxFit.cover,
                               ),
                          ),

                          Text(
                            category.categoryList[index].name,
                            style: rubikMedium.copyWith(fontSize: Dimensions.FONT_SIZE_SMALL),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),

                        ]),
                      ),
                    );
                  },
                ) : Center(child: Text(getTranslated('no_category_avl', context))) : CategoryShimmer(),
              ),
            ),
           ResponsiveHelper.isMobile(context)? SizedBox(): category.categoryList != null ? Column(
              children: [
                InkWell(
                  onTap: (){
                    showDialog(context: context, builder: (con) => Dialog(
                      child: Container(height: 550, width: 600, child: CategoryPopUp())
                    ));
                  },
                  child: Padding(
                    padding: EdgeInsets.only(right: Dimensions.PADDING_SIZE_SMALL),
                    child: CircleAvatar(
                      radius: 35,
                      backgroundColor: Theme.of(context).primaryColor,
                      child: Text(getTranslated('view_all', context), style: TextStyle(fontSize: 14,color: Colors.white)),
                    ),
                  ),
                ),
                SizedBox(height: 10,)
              ],
            ): CategoryAllShimmer()
          ],
        ),

If anyone can help me, I will be very grateful. Big hug!

score 0 · Answer 1 · answered Jun 19 '21 at 02:49

There are 2 possibilities I can think of

Solution 1: You can have 2 list views one on the top and one on the bottom. (1st row having half and the 2nd row having another half)

First row: itemCount: half, and inside builder you can use index as it is

Second row: itemCount: half, and inside builder you can use index as index+half (as builder always starts from 0)

*Above solution might be a tough choice if you have the category items more than 10 (which again leads to scrolling)

Solution 2: You can use a "GridView"

Below is a link where you can go through to know how you can build in GridView. Link: https://stackoverflow.com/a/44184514/10136829

Hope this answers is helpful.

Problem to separate listView.Builder into two lines

1 Answers1