Is there any way I could map Routes in Flutter?

Question

I tried creating a list of items to map out on my app, and I tried inserting a named route to each item for it's page destination. And when I tried to use Navigator.pushNamed(context, listName.elementAt(index)['destination'] on to the onTap property of the GestureDetector, it shows an error that 'index' is not defined. Any tips or is there something I should know since I'm new here? Thanks.

import 'package:egarment2/pages/master_menu/input_raw.dart';
import 'package:flutter/material.dart';

class FeatureCard extends StatefulWidget {
  const FeatureCard(
      {Key? key,
      // required this.featureDestination //add props, different image every call
      })
      : super(key: key);

  // final Widget featureDestination;

  @override
  State<FeatureCard> createState() => _FeatureCardState();
}

class _FeatureCardState extends State<FeatureCard> {
  final List<Map<String, dynamic>> masterMap = [
    {'image': 'assets/images/raw.png', 'title': 'Input Raw', 'destination': InputRaw.id},
    {'image': 'assets/images/supplier.png', 'title': 'Input Supplier', 'destination': InputRaw()},
    {'image': 'assets/images/cmt.png', 'title': 'Input CMT', 'destination': InputRaw()},
    {'image': 'assets/images/pola.png', 'title': 'Input Pola', 'destination': InputRaw()},
    {'image': 'assets/images/outlet.png', 'title': 'Input Outlet', 'destination': InputRaw()},
    {'image': 'assets/images/product.png', 'title': 'Input Produk', 'destination': InputRaw()},
    {'image': 'assets/images/material.png', 'title': 'Input Jenis Material', 'destination': InputRaw()},
    {'image': 'assets/images/warna.png', 'title': 'Input Warna', 'destination': InputRaw()},
    {'image': 'assets/images/qr.png', 'title': 'Input by QR', 'destination': InputRaw()},
    {'image': 'assets/images/acc.png', 'title': 'Accessories', 'destination': InputRaw()},
    {'image': 'assets/images/tools.png', 'title': 'Tools & Equipment', 'destination': InputRaw()},
    {'image': 'assets/images/adjustment.png', 'title': 'Adjustments', 'destination': InputRaw()},
    {'image': 'assets/images/stock.png', 'title': 'Stock Opname', 'destination': InputRaw()},
  ];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          Navigator.pushNamed(context, masterMap.elementAt(index)['destination']);
        },
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 12.0,
            mainAxisSpacing: 12.0,
          ),
          itemCount: masterMap.length,
          itemBuilder: (_, index) {
            return Padding(
              padding: const EdgeInsets.only(top: 40),
              child: Container(
                height: 175,
                width: 150,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white,
                ),
                child: Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(20),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Image.asset(
                          '${masterMap.elementAt(index)['image']}'), // dynamic image
                    ),
                    Text(
                      '${masterMap.elementAt(index)['title']}',
                      style: TextStyle(
                        fontFamily: 'Quicksand',
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ));
  }
}

Answer 1

Something looks strange in your snippet, check my last line that's how i use it itemBuilder: (BuildContext context, int index)

 child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 12.0,
            mainAxisSpacing: 12.0,
          ),
        itemCount: masterMap.length,
        itemBuilder: (BuildContext context, int index) {

Besides your gesture detector is not on the builder so yes index is not well defined here. May i suggest you to add InkWell on Padding element like below to get the index in onTap .

 child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 12.0,
            mainAxisSpacing: 12.0,
          ),
          itemCount: masterMap.length,
          itemBuilder: (_, index) {  
            return  InkWell(
             onTap: (){
                 Navigator.pushNamed(context, masterMap.elementAt(index)['destination']);
            },  
            Padding(
              padding: const EdgeInsets.only(top: 40),
              child: Container(
                height: 175,
                width: 150,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white,
                ),
                ...
                
            )
        )