custom_grid.dart

class CategoryView extends StatefulWidget {
  final bool isHomePage;

  CategoryView({required this.isHomePage});

  @override
  State<CategoryView> createState() => _CategoryViewState();
}

class _CategoryViewState extends State<CategoryView> {
  var currentPageValue = 0.0;

  int totalGridItems=6; 

  int startItem=0;

  PageController controller = PageController();
  bool isLastPage= false;
  int? pages;
  int? lastPageITems;
@override
void initState() {
  super.initState();
   pages =  (context.read<CategoryProvider>().categoryList.length /6).ceil();
  controller.addListener(() {
  setState(() {
    currentPageValue = controller.page!;
    startItem = currentPageValue.toInt()*6;
isLastPage= currentPageValue.toInt()+1==pages;

   lastPageITems = context.r…
import 'package:eamar_user_app/view/screen/home/widget/category_details_screen.dart';
import 'package:eamar_user_app/view/screen/product/all_product_by_category.dart';
import 'package:eamar_user_app/view/screen/product/category_details_screen.dart';
import 'package:flutter/material.dart';
import 'package:eamar_user_app/provider/category_provider.dart';
import 'package:eamar_user_app/view/screen/home/widget/category_widget.dart';
import 'package:eamar_user_app/view/screen/product/brand_and_category_product_screen.dart';
import 'package:provider/provider.dart';

import 'category_shimmer.dart';

class CategoryView extends StatefulWidget {
  final bool isHomePage;

  CategoryView({required this.isHomePage});

  @override
  State<CategoryView> createState() => _CategoryViewState();
}

class _CategoryViewState extends State<CategoryView> {
  var currentPageValue = 0.0;

  int totalGridItems=6; 

  int startItem=0;

  PageController controller = PageController();
  bool isLastPage= false;
  int? pages;
  int? lastPageITems;
@override
void initState() {
  super.initState();
   pages =  (context.read<CategoryProvider>().categoryList.length /6).ceil();
  controller.addListener(() {
  setState(() {
    currentPageValue = controller.page!;
    startItem = currentPageValue.toInt()*6;
isLastPage= currentPageValue.toInt()+1==pages;

   lastPageITems = context.read<CategoryProvider>().categoryList.length<6?
  0: context.read<CategoryProvider>().categoryList.length%6;
  });
});
}
  @override
  Widget build(BuildContext context) {
  
    return Consumer<CategoryProvider>(
      
      builder: (context, categoryProvider, child) {
  // var pages =  (categoryProvider.categoryList.length /6).ceil();

        return 
        
        categoryProvider.categoryList.length != 0 ?
        SizedBox(
          height: MediaQuery.of(context).size.height/3.2,
          child:
Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
        Expanded(
          flex: 1,
          child: PageView.builder(
              controller: controller,
              pageSnapping: false,
               physics: BouncingScrollPhysics(),
              itemBuilder: (context, position) {
          return   GridView.builder( 
             shrinkWrap: true,
             
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                  ),
                  itemCount:   
                  !isLastPage? 
                  categoryProvider.categoryList.length<6?
                  categoryProvider.categoryList.length:
                     6   :lastPageITems,
                  // categoryProvider.categoryList.length,
                  itemBuilder: (BuildContext context, int index) {

// 0 -5//     index*startItem
//6 -7
// var cat = categoryProvider.categoryList[currentPageValue.toInt()]

                    return
                    
                     InkWell(
                      onTap: () {
                        categoryProvider.changeSelectedIndex(index+startItem);
                        
            
            
            
            
            if (categoryProvider.categoryList[index+startItem].subCategories!.length>0) {
          //  Navigator.push(context, MaterialPageRoute(builder: (_) =>
          //                CategoryDetailsScreen(
          //                 isBrand: false,
          //                 category: categoryProvider.categoryList[index],
          //                 id: categoryProvider.categoryList[index].id.toString(),
          //                 name: categoryProvider.categoryList[index].name,
          //               )));
            
            
            
            
            
            
            
            Navigator.push(context, MaterialPageRoute(builder: (_) =>
                         CategoryDetailsPage(
                          // isBrand: false,
                          category: categoryProvider.categoryList[index+startItem],
                          // id: categoryProvider.categoryList[index].id.toString(),
                          // name: categoryProvider.categoryList[index].name,
                        )));
            
            
            
            
            
            
            } else {
            
            
              Navigator.push(context, MaterialPageRoute(builder: (_) =>
                         AllProductsByCategory(
                          isBrand: false,
                          // category: categoryProvider.categoryList[index],
                          id: categoryProvider.categoryList[index+startItem].id.toString(),
                          name: categoryProvider.categoryList[index+startItem].name,
                        )));
            
            
            
            
            
            }
            
            
                     
                      },
                      child: CategoryWidget(category: categoryProvider.categoryList[index+startItem]),
                    );
              
            
                  },
                );
                
              },
              itemCount: pages, // Can be null
            ),
        ),
 SizedBox(height: 2,), 
 
 Center(
child: Container(
  height: 8,
 width: pages!*15+ 20,
 decoration: BoxDecoration(
        color:Colors.grey,
        borderRadius: BorderRadius.circular(50)),
 padding: EdgeInsets.symmetric(horizontal: 10),

  child:   Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children:List.generate(pages!, (index) => Container(
       width: 15,
       decoration: BoxDecoration(
        color: 
        currentPageValue.toInt()==index?
        Theme.of(context).primaryColor:   Colors.transparent,
        borderRadius: BorderRadius.circular(50)),
     
    )
    ),
  ),
),
 )
  ],
)

        
        )

        : 
        
        CategoryShimmer();

      },
    );
  }
}