Cannot Pass an onTap Field to a Stateless Widget - flutter

Question

In a grid view, since I have similar card items, I decided to create a custom widget containing each card item. The custom widget is a stateless widget. The problem I have is in passing an onTap property to the class. In fact, I do pass and no errors are there, but the onTap property does not propagate properly and it does not display the SnackBar I want. Here's the code:
import 'package:flutter/material.dart';
const _padding = EdgeInsets.all(8.0);
const _splashColor = Colors.amber;
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Main Page'),),
drawer: Drawer(
elevation: 8.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
DrawerHeader(
child: Column(
children: [
Image(image: AssetImage('assets/images/top_picture.png'), fit: BoxFit.scaleDown, width: 100, height: 100),
Text('Home', style: Theme.of(context).textTheme.headline6)
],
)),
ListTile(leading: Icon(Icons.settings), title: Text('Settings')),
ListTile(leading: Icon(Icons.exit_to_app), title: Text('Quit')),
AboutListTile(icon: Icon(Icons.info), aboutBoxChildren: [Text('Copyright (C) 2020'), Text('Design And Programming: me')],)
],
)),
body: HomeScreenBody(),
);
}
}
class HomeScreenBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding (
padding: const EdgeInsets.all(8.0),
child: GridView (
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
ItemCard(title: 'Balance', icon: 'assets/images/coins-balance.png', onTap: _comingSoon),
ItemCard(title: 'Add Funds', icon: 'assets/images/add-money.png', onTap: _comingSoon,),
ItemCard(title: 'Restaurant', icon: 'assets/images/restaurant.png', onTap: _comingSoon),
],
),
);
}
void _comingSoon(BuildContext context) {
print('Showing snackbar...');
final snack = SnackBar(content: Text('Coming soon...'));
Scaffold.of(context).showSnackBar(snack);
}
}
class ItemCard extends StatelessWidget{
final String icon;
final String title;
final ValueChanged<BuildContext> onTap;
const ItemCard({this.title, this.icon, this.onTap});
#override
Widget build(BuildContext context){
return Builder(builder:(context) {
return Card(
child: InkWell(
splashColor: _splashColor,
onTap: ()=> this.onTap,
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: Image.asset(this.icon).image, ),
Padding(
padding: _padding,
child: Text(this.title),
)
],
),
),
);
},
);
}
}
I tried changing the type of onTap field to ValueChanged, ValueChanged, ValueChanged<BuildContext), but none of them worked. Any idea why my callback is not called?

Answer 1

Try this
class ItemCard extends StatelessWidget{
final String icon;
final String title;
final void Function(BuildContext) onTap; //your function expects a context
const ItemCard({this.title, this.icon, this.onTap});
#override
Widget build(BuildContext context){
return Builder(builder:(ctx) { //changed to ctx so that contexts don't clash
return Card(
child: InkWell(
splashColor: _splashColor,
onTap: ()=> this.onTap(context), //pass context here
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: Image.asset(this.icon).image, ),
Padding(
padding: _padding,
child: Text(this.title),
)
],
),
),
);
},
);
}
}
Let me know if this doesn't work.. there is other simple way too.

Answer 2

Use a VoidCallback for your onTap variable.
Wrap the HomeScreen widget tree with a Builder widget so a context to be used in the SnackBar can be available.
I added a demo using your code as an example:
This works:
class ItemCard extends StatelessWidget{
final String icon;
final String title;
final VoidCallback onTap; // use a VoidCallback instead
const ItemCard({this.title, this.icon, this.onTap});
#override
Widget build(BuildContext context){
return Builder(builder:(context) {
return Card(
child: InkWell(
splashColor: _splashColor,
onTap: onTap, // assign the onTap property
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: Image.asset(this.icon).image, ),
Padding(
padding: _padding,
child: Text(this.title),
)
],
),
),
);
},
);
}
class HomeScreenBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Builder(
builder: (context){,
child: Padding (
padding: const EdgeInsets.all(8.0),
child: GridView (
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
ItemCard(title: 'Balance', icon: 'assets/images/coins-balance.png', onTap: () => _comingSoon(context)),
ItemCard(title: 'Add Funds', icon: 'assets/images/add-money.png', onTap: () => _comingSoon(context),),
ItemCard(title: 'Restaurant', icon: 'assets/images/restaurant.png', onTap: () => _comingSoon(context)),
],
),
);
},
);
}
void _comingSoon(context) {
print('Showing snackbar...');
final snack = SnackBar(content: Text('Coming soon...'));
Scaffold.of(context).showSnackBar(snack);
}
}

Answer 3

Change widget's onTap parameter to be a final Function(BuildContext) and then in onTap: change ()=> this.onTap to onTap(). That should do it.