how create GridView with ViewPager in flutter - flutter

Question

I am trying to create the grid view inside the page view, what I want is,
In grid view, I want to display only 6 items and other items I want go to another page of the page view, what I mean is I only want 6 items on each page of the page view,
To clarify more, if I have 6 items, the page view will create only one page in which 6 items will appear from the gridview, or if I have 12 items, the page view will create two pages and each page will display 6 items from the gridview, or if I have 16 items, the page view will create three Pages per page 6 items, etc.,
This is the code that I tried to do, but it did not work. Can someone help me with it? Thank you
Expanded(
child: Container(
decoration: const BoxDecoration(
color: Color(0xFFE6E6E6),
image: DecorationImage(
image: AssetImage('assets/images/background_image.png'),
fit: BoxFit.fill,
),
),
child: PageView.builder(
controller: _controller,
physics: const BouncingScrollPhysics(),
itemCount: items.length % 6,
itemBuilder: (context, index) => GridView.builder(
padding:
EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h),
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 20.w,
mainAxisSpacing: 20.h,
childAspectRatio: 4 / 1.5,
),
itemCount: items.length,
primary: false,
itemBuilder: (context, index) => Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.r),
),
child: Row(
children: [
Container(
width: 140.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.r),
image: DecorationImage(
image: NetworkImage(
items[index].photoUrl,
),
fit: BoxFit.cover,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 16.w,
vertical: 18.h,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
items[index].categoryName,
style: TextStyle(
fontSize: 10.sp,
color: const Color(0xFFBCBCBC),
),
),
Text(
items[index].itemName,
style: TextStyle(
fontSize: 12.sp,
color: const Color(0xFFFC4747),
fontWeight: FontWeight.bold,
),
),
const Spacer(),
Text(
'${items[index].price}د.ع',
style: TextStyle(
color: const Color(0xFF40484E),
fontSize: 12.sp,
),
),
Row(
children: [
Icon(
CupertinoIcons.time,
size: 8.sp,
color: const Color(0xFFBCBCBC),
),
Text(
'${items[index].time}m',
style: TextStyle(
fontSize: 8.sp,
color: const Color(0xFFBCBCBC),
),
),
],
)
],
),
),
)
],
),
),
),
),
),
),
A picture showing the shape of the elements

Answer 1

I modified your code the way you wanted Here is the solution :
My modified code will divide your main list into to small lists with 6 items. Here I take main list length is 16 so it's divide into 6 : 6 : 4 items lists.
Output :
Code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<int> items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
var gridViewLists = [];
int listBreakerSize = 6;
#override
void initState() {
for (var i = 0; i < items.length; i += listBreakerSize) {
gridViewLists.add(items.sublist(
i, i + listBreakerSize > items.length ? items.length : i + listBreakerSize));
}
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(top: 40),
decoration: const BoxDecoration(
color: Color(0xFFE6E6E6),
),
child: PageView.builder(
// controller: _controller,
physics: const BouncingScrollPhysics(),
itemCount: (items.length / 6).ceil(),
itemBuilder: (context, i) => GridView.builder(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
childAspectRatio: 4 / 1.5,
),
itemCount: gridViewLists[i].length,
primary: false,
itemBuilder: (context, index) => Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
Container(
width: 116,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(15),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 16,
vertical: 18,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
//items[index].categoryName,
'categoryName',
style: TextStyle(
fontSize: 10,
color: const Color(0xFFBCBCBC),
),
),
Text(
//items[index].itemName,
'itemName',
style: TextStyle(
fontSize: 12,
color: const Color(0xFFFC4747),
fontWeight: FontWeight.bold,
),
),
const Spacer(),
Text(
// '${items[index].price}د.ع',
'price',
style: TextStyle(
color: const Color(0xFF40484E),
fontSize: 12,
),
),
Row(
children: [
Icon(
CupertinoIcons.time,
size: 8,
color: const Color(0xFFBCBCBC),
),
Text(
//'${items[index].time}m',
'time',
style: TextStyle(
fontSize: 8,
color: const Color(0xFFBCBCBC),
),
),
],
)
],
),
),
)
],
),
),
),
),
),
),
],
);
}
}