flutter different screen navigation using only on onTap function

Question

How can i navigate to a different route while I'm dealing with data list in flutter, in my case all the cards will navigate me to the same route.
Relevant code with facing this issue,

Column(
  children: levelData.map((value) { 
    return Container( 
      margin: EdgeInsets.symmetric(vertical: 10.0), 
      decoration: BoxDecoration( 
        borderRadius: BorderRadius.circular(13.0),
        border: Border.all( color: AppColors().containerBorder)
      ),
      child: AppListTile(
        contentPadding: EdgeInsets.all(15.0),
        onTap: () {
         
        }, 
        title: Text(
          value['name'], 
          style: TextStyle(
            fontSize: displayWidth(context) * 0.045,
            color: AppColors().black
          ),
        ),
        subtitle: Text(
          value['description'],
          style: TextStyle(
            color: AppColors().black,
            fontSize: displayWidth(context) * 0.035
          ),
        ),
        trailing: Icon(
          Icons.arrow_forward_outlined,
          size: displayWidth(context) * 0.08,
          color: AppColors().orange,
        ),
      ),
    );
  }).toList(),
),

Answer 1

A good thing about flutter is that you can store functions as variables, and variables can be stored as array. So you can create an array and store the functions you want your tiles to do in that array, each index should represent the index of the list tile your building now. This is a sample array

var functionsArray = [
    (){print("hello");}, 
    (){print("hello");}, 
];

You can edit your code to fit in this form as follows:

   List<Widget> getData(levelData){
      List<AppListTile> data = []
      for(int i=0;i < levelData.length; i++){
         var tileData = levelData[i];
         Function myFunction = functionsArray[i];
         tile = AppListTile(onTap: myFunction);
         data.add(tile);
      }
      return data;
    }