Ripple effect appears under custem listview item on click in Flutter - flutter

Question

I have tried many solutions from this platform and others too but my problem remains the same. I have done this before and successfully ripple the listview item in another custom listview. But this time i am not getting any clue where i am lacking. The previous solution make things more messy if try this time. Ripple is appearing under listview item what i want is to only listview item do ripples.
class Dashboard extends StatefulWidget {
#override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
// Map<String, dynamic> args;
List<DashboardItem> lst = [
DashboardItem(
img: 'assets/sales.png', name: 'Sales', subtitle: 'Your daily sales'),
DashboardItem(
img: 'assets/order.png', name: 'Orders', subtitle: 'Your new orders'),
DashboardItem(
img: 'assets/report.png',
name: 'Reports',
subtitle: 'Your daily reports'),
DashboardItem(
img: 'assets/setting.png',
name: 'Setting',
subtitle: 'Application setting'),
DashboardItem(
img: 'assets/register.png',
name: 'Register',
subtitle: 'Close your register'),
DashboardItem(
img: 'assets/logout.png', name: 'Logout', subtitle: 'You can rest')
];
#override
Widget build(BuildContext context) {
// args = ModalRoute.of(context).settings.arguments;
// print('Dashboard : ${args['regId']}');
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
elevation: 0.0,
title: Text('My Dashboard'),
centerTitle: true,
),
body: LayoutBuilder(
builder: (context, constraints){
if(constraints.maxWidth < 600){
return ListView.builder(
itemCount: lst.length,
shrinkWrap: true,
itemBuilder: (context, position){
return Container(
padding: position == lst.length ? const EdgeInsets.only(top:16.0) : const EdgeInsets.only(top:16.0, bottom: 16.0),
child: InkWell(
child: DashboardCard(lst[position]),
onTap: (){
Toast.show('In List', context);
},
),
);
},
);
}
else{
return GridView.builder(
itemCount: lst.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (context, position){
return InkWell(
child: DashboardCard(lst[position]),
onTap: (){
Toast.show('In Grid', context);
},
);
},
);
}
},
),
);
}
}
DashboardCard Class
class DashboardCard extends StatelessWidget {
final DashboardItem _dashboardItem;
const DashboardCard(this._dashboardItem);
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 230,
width: 280,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 10.0,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
image: AssetImage(_dashboardItem.img),
fit: BoxFit.contain,
width: 80,
height: 80,
),
SizedBox(height: 20,),
Text(
_dashboardItem.name,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
fontFamily: 'Ubuntu',
letterSpacing: 2.0,
color: Colors.redAccent,
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
_dashboardItem.subtitle,
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
letterSpacing: 2.0,
color: Colors.grey,
),
),
),
],
),
),
),
),
);
}
}

Answer 1

The issue is with the Center widget in your DashboardCard:
You can fix it wrapping your DashboardCard Container widget in an InkWell widget and pass a onTap parameter to the DashboardCard constructor:
class DashboardCard extends StatelessWidget {
final DashboardItem _dashboardItem;
final VoidCallback onTap;
const DashboardCard(
this._dashboardItem, {
this.onTap,
});
#override
Widget build(BuildContext context) {
return Center(
child: InkWell(
onTap: onTap,
child: Container(
height: 230,
width: 280,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 10.0,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
image: AssetImage(_dashboardItem.img),
fit: BoxFit.contain,
width: 80,
height: 80,
),
SizedBox(
height: 20,
),
Text(
_dashboardItem.name,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
fontFamily: 'Ubuntu',
letterSpacing: 2.0,
color: Colors.redAccent,
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
_dashboardItem.subtitle,
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
letterSpacing: 2.0,
color: Colors.grey,
),
),
),
],
),
),
),
),
),
);
}
}
The use it in other places like:
DashboardCard(
lst[position],
onTap: () {
Toast.show('In List', context);
},
),