How do I put the last 5 images into row of the next line?

Issue

Stack last 5 objects into rows in next line

@override
Widget build(BuildContext context) {
return Container(
height: 10,
child: ListView(scrollDirection: Axis.horizontal, children: [
Row(
children: [
CategoriesCard(
(Image.asset(
‘assets/icons/categoori.png’,
height: 70,
width: 60,
)),
‘ All \nCategories’),
CategoriesCard(
(Image.asset(
‘assets/icons/Electronics.png’,
height: 70,
width: 60,
)),
‘Electronics \n Devices’),
CategoriesCard(
(Image.asset(
‘assets/icons/Mens.JPG’,
height: 70,
width: 60,
)),
" Men’s \n Fashion"),
CategoriesCard(
(Image.asset(
‘assets/icons/womens.JPG’,
height: 70,
width: 60,
)),
" Women’s \n Fashion"),
CategoriesCard(
(Image.asset(
‘assets/icons/watch.JPG’,
height: 70,
width: 60,
)),
‘ Watch & \n Accessories’),
Padding(padding: EdgeInsets.only(left: 0)),
CategoriesCard(
(Image.asset(
‘assets/icons/abc.JPG’,
height: 70,
width: 60,
)),
‘ Home & \n Lifestyle’),
CategoriesCard(
(Image.asset(
‘assets/icons/health.JPG’,
height: 70,
width: 60,
)),
‘ Health & \n Beauty’),
CategoriesCard(
(Image.asset(
‘assets/icons/books.JPG’,
height: 70,
width: 60,
)),
‘ Books & \n Music’),
CategoriesCard(
(Image.asset(
‘assets/icons/gifts.JPG’,
height: 70,
width: 60,
)),
‘ Gifts & \n Cakes’),
CategoriesCard(
(Image.asset(
‘assets/icons/groceries.JPG’,
height: 70,
width: 60,
)),
‘ Groceries & \n Supplies’),
],
),
]),
);
}
}

Solution

You could put your items in a GridView, specifically, a GridView.count to specify a number of items per row:

GridView.count(
  crossAxisCount: 5,
  children: [
    ...
  ],
),

Answered By – fravolt

Answer Checked By – Clifford M. (FlutterFixes Volunteer)