Flutter：如何使用 VoidCallBack onTap 函数获取索引值

Question

I have having this problem, and wondering if someone can help me out.

class GridViewSelection extends StatelessWidget {
  GridViewSelection(
      {super.key,
      required this.menuList,
      required this.onTap,
      this.imageList,
      this.nameList,});

  VoidCallback onTap;
  int menuList;
  List? imageList;
  List? nameList;
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(15),
        child: GridView.builder(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10),
            itemCount: menuList,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: onTap,
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SvgPicture.asset(
                            imageList![index],
                            fit: BoxFit.contain,
                            width: MediaQuery.of(context).size.width * 0.15,
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Text(
                            textAlign: TextAlign.center,
                            nameList![index],
                            style: TextStyle(
                                fontSize: 14,
                                color: AppTheme.colors.greyFontColor),
                          ),
                        ]),
                  ),
                ),
              );
            }));
  }
}

I have this custom GridView widget, here is the snippet I am using to render the gridView,

GridViewSelection(
   menuList: oldMenu.length, 
   imageList: oldMenu.map((e) => e.image).toList(), 
   nameList: oldMenu.map((e) => e.name).toList(),
      onTap: (){}), 

I have this VoidCallBack and I want to get the index value of the clicked item. for example if i click on 'Next Page' , I want to print the 'Next Page' String to console and if I click on 'Previous Page' , I want to print the 'Previous Page' String to console, Here is the map I am using to propagate the Grid.

class OldMenu{
  String name;
  String image; 

  OldMenu({this.name = '', this.image = ''});
}
var oldMenu = [
  OldMenu(name: 'Previous Page' , image: 'assets/previous_page.svg'),
  OldMenu(name: 'Next Page' , image: 'assets/next_page.svg'),
]

any help is highly appreciated.

Answer 1

You can use Function like this, first change your VoidCallback to Function like this:

class GridViewSelection extends StatelessWidget {
  GridViewSelection(
      {super.key,
      required this.menuList,
      required this.onTap,
      this.imageList,
      this.nameList,});

  Function(int) onTap;
  int menuList;
  List? imageList;
  List? nameList;

 ...
}

then use it like this:

GestureDetector(
     onTap: (){
        onTap(index);
     },
     child: Card(
      ...
)

then in your main class do this:

GridViewSelection(
   menuList: oldMenu.length, 
   imageList: oldMenu.map((e) => e.image).toList(), 
   nameList: oldMenu.map((e) => e.name).toList(),
   onTap: (int index){
     //use index here
   }
),