Still having hard time with InkWell, im build a card and i want to give ripple/splash effect when i tap the card but i can only give the ripple effect on the image only or the text only. I want to give the effect to entire widget/card not only to the card or text
im using wrap only the image soe the ripple only on image
Container(
margin: EdgeInsets.only(right: 20),
width: 160,
child: InkWell(
onTap: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Card image
Container(
margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1557752507-4f2fe433a3c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fHZlbmRvcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
),
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.3),
BlendMode.darken),
),
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {}
),
),
),
// Card title
// Card description
// Card rating
// Card location
],
),
),
),
but in this one i wrap all the card with InkWell but the result is the image doesn't get the ripple
// PLACE CARD
Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(width: 24),
for (int i = 0; i < data['bd_list'].length; i++)
Container(
margin: EdgeInsets.only(right: 20),
width: 160,
child: InkWell(
onTap: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Card image
// Card title
// Card description
// Card rating
// Card location
],
),
),
),
],
),
),
),