Can't access onPressed method of a Widget when creating it dynamically - flutter

Question

First of all, let me fill you in the details:
I have this Widget:
class MenuAction extends StatelessWidget {
const MenuAction({
Key? key,
this.height,
required this.icon,
required this.label,
required this.willNavigate,
this.route,
this.onPressed,
required this.identifier,
}) : super(key: key);
final double? height;
final IconData icon;
final String label;
final bool willNavigate;
final Widget? route;
final VoidCallback? onPressed;
final String identifier;
#override
Widget build(BuildContext context) {
return SizedBox(
width: 70,
height: height ?? 80,
child: Column(
children: [
ClipOval(
child: Material(
color: Palette.aliceBlue,
child: IconButton(
onPressed: () async {
increaseUsage(identifier: identifier);
willNavigate ? navigate(context, route) : onPressed;
},
icon: Icon(
icon,
color: Palette.celticBlue,
size: 25,
),
),
),
),
const Spacer(),
Text(
label,
style: TextStyle(
color: Palette.oxfordBlue,
fontSize: 12,
),
textAlign: TextAlign.center,
),
const Spacer(
flex: 3,
),
],
),
);
}
}
This widget must have an icon, a label, an identifier and it should be specified if this widget willNavigate to a route or not.
If it should navigate, a route should be specified. If it shouldn't navigate, a onPressed function should be specific.
I also have a list of predefined actions built:
List<MenuAction> actions = [
MenuAction(
icon: Icons.cloud_download_outlined,
label: "Sincronizar",
willNavigate: false,
onPressed: () async {},
identifier: "syncDat",
),
MenuAction(
icon: Icons.business_center_outlined,
label: "Proposta Comercial",
willNavigate: true,
route: AppRoutes.comercialProposalList,
identifier: "propCom",
),
MenuAction(
icon: Icons.shopping_cart_outlined,
label: "Pedidos",
willNavigate: true,
route: AppRoutes.orderList,
identifier: "order",
),
MenuAction(
icon: Icons.cloud_upload_outlined,
label: "Enviar Pedidos",
willNavigate: false,
onPressed: () {},
identifier: "sendOrd",
),
MenuAction(
icon: Icons.receipt_long_rounded,
label: "Nota Fiscal",
willNavigate: true,
route: AppRoutes.invoiceList,
identifier: "invoice",
),
MenuAction(
icon: Icons.person_outline,
label: "Clientes",
willNavigate: true,
route: AppRoutes.clientsList,
identifier: "clients",
),
MenuAction(
icon: Icons.map_outlined,
label: "Endereços",
willNavigate: true,
route: AppRoutes.addressesList,
identifier: "address",
),
MenuAction(
icon: Icons.inventory_2_outlined,
label: "Estoque",
willNavigate: true,
route: AppRoutes.inventoryList,
identifier: "invent",
),
];
I access these actions through this function:
MenuAction getActionByIdentifier({String identifier = ""}) {
return actions.elementAt(
actions.indexWhere((element) => element.identifier == identifier),
);
}
Why go through all this trouble to create some simple widgets? they'll be used at my app's home screen, where all actions will be available in a horizontal slider. Also, the most used actions will be displayed below to the user. A count of how many times said action was used is stored in my local database along with the action's identifier, allowing me to retrieve and create it later using the function described earlier. Why did I did it this way? because I wanted to code my action only once and access it from different sources.
Now, if I create my actions statically, their onPressed event works flawlessly.
This is the Widget that creates all my actions statically:
class HomeActionsListView extends StatefulWidget {
const HomeActionsListView({
Key? key,
}) : super(key: key);
#override
State<HomeActionsListView> createState() => _HomeActionsListViewState();
}
class _HomeActionsListViewState extends State<HomeActionsListView> {
#override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: [
getActionByIdentifier(identifier: "syncDat"),
getActionByIdentifier(identifier: "propCom"),
getActionByIdentifier(identifier: "order"),
getActionByIdentifier(identifier: "sendOrd"),
getActionByIdentifier(identifier: "invoice"),
getActionByIdentifier(identifier: "clients"),
getActionByIdentifier(identifier: "address"),
getActionByIdentifier(identifier: "invent"),
],
);
}
}
Keep in mind that the onPressed event is ALWAYS present within my widget, since ALL actions increase their usage count in the database. As you can see in the code, the increaseUsage is called and then the widget will decide if it will only navigate to the provided route OR execute the specified custom onPressed function.
But for some reason, when I create the same widgets using the getActionByIdentifier function and try to pass it's label and onPressed event to a custom Card I built, the event doesn't trigger.
This is the FutureBuilder that creates my cards dynamically within a ListView based on the first most used actions:
FutureBuilder(
future: getMostUsedActions(),
builder: (BuildContext context,
AsyncSnapshot<List<String>> snapshot) {
if (snapshot.hasData) {
if (snapshot.data!.isNotEmpty) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
MenuAction action = getActionByIdentifier(
identifier: snapshot.data![index],
);
return RecentActionCard(
text: action.label,
onPressed: action.onPressed,
);
},
);
} else {
return const Center(
heightFactor: 15,
child: Text(
"Nenhuma ação utilizada recentemente!",
),
);
}
} else {
return const Center(
child: CircularProgressIndicator.adaptive(),
);
}
},
);
This is the code to my custom Card:
class RecentActionCard extends StatelessWidget {
const RecentActionCard({
Key? key,
required this.text,
this.onPressed,
}) : super(key: key);
final String text;
final VoidCallback? onPressed;
#override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(
color: Palette.celticBlue,
width: 2,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.only(left: 30),
child: Text(
text,
style: TextStyle(
fontFamily: "Barlow",
fontSize: 16,
fontWeight: FontWeight.bold,
color: Palette.oxfordBlue,
),
),
),
),
SizedBox(
height: 55,
width: 55,
child: IconButton(
onPressed: onPressed,
icon: Icon(
Icons.arrow_forward_ios,
color: Palette.oxfordBlue,
),
),
)
],
)
],
),
);
}
}
Finally, my question is: Why do my statically created widget's onPressed event work and when I try to create them dinamically they are returned as null?
Also, any way to make it work?
And, last but not least, if you have any suggestions on how to improve my code, they'll be much appreciated.