Problem to separate listView.Builder into two lines - flutter

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!

Answer 1

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.