Different button will take me through different pages in Flutter - flutter

Question

I'm working on a flutter project. I have a multiple button (Container wrap in Inkwell) using only one button in code and in List. I have tried to handle multiple buttons work in a List. But there is an error showing on the onTap function.
import 'package:flutter/material.dart';
import '../Ambulance/AmbulanceHome.dart';
import '../Blood Bank/BloodHome.dart';
import '../CreateCase/CaseHome.dart';
import '../Doctor Appoinment/HomeScreen.dart';
class BottomHomePage extends StatelessWidget {
List<FeaturesList> featuresList = [
FeaturesList('assets/BloodBank.jpg', 'Blood Bank', (context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) {
return HomeScreen();
},
),
);
}),
FeaturesList('assets/BloodBank.jpg', 'Doctor Appoinment', (context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) {
return HomeScreen();
},
),
);
}),
FeaturesList('assets/BloodBank.jpg', 'Create a Case', (context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) {
return HomeScreen();
},
),
);
}),
FeaturesList('assets/BloodBank.jpg', 'Ambulance', (context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) {
return HomeScreen();
},
),
);
}),
];
// void selectFeatures(BuildContext context) {
// Navigator.of(context).push(
// MaterialPageRoute(
// builder: (_) {
// return HomeScreen();
// },
// ),
// );
// }
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFD9E4EE),
body: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withOpacity(0.8),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
'Fade-in logo of our project added here',
textAlign: TextAlign.center,
),
),
const SizedBox(height: 20),
Container(
alignment: AlignmentDirectional.topStart,
child: Text(
"Features",
style: Theme.of(context).textTheme.headline6,
),
),
const SizedBox(height: 20),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(
featuresList.length,
(index) {
return Column(
children: [
InkWell(
onTap: () => featuresList.callback?.call(context),
child: Container(
width: 150,
height: 150,
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(50),
// color: Theme.of(context)
// .colorScheme
// .primaryContainer
// .withOpacity(0.4),
),
child: Image.asset(featuresList[index].icon),
),
),
Text(featuresList[index].name),
],
);
},
),
),
),
],
),
),
);
}
}
class FeaturesList {
final String icon;
final String name;
final Function(BuildContext) callback;
FeaturesList(
this.icon,
this.name,
this.callback,
);
}
I have tried to use the navigation route in the List, but when I try to call the function called callback (which is defined in Features List class).
The error is on the line:
onTap: () => featuresList.callback?.call(context),
redline on the callback
Error message:
The getter 'callback' isn't defined for the type 'List'.
Try importing the library that defines 'callback', correcting the name to the name of an existing getter, or defining a getter or field named 'callback'.

Answer 1

featuresList is a List, so it does not have callback property. You should use
onTap: () => featuresList[index].callback?.call(context)