1

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

enter image description here

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
                        ],
                      ),
                    ),
                  ),

enter image description here

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
                        ],
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ),
CCP
  • 886
  • 1
  • 10
  • 30

1 Answers1

-1

Try below code.

Container(
    child: InkWell(
      onTap: () {},
      child: Column(
        children: [
          Container(
            width: 227,
            height: 227,
            child: Ink.image(
              image: NetworkImage(
                  'https://images.unsplash.com/photo-1587207433549-7d796bccc6a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YnV0dG9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
              fit: BoxFit.cover,
              child: InkWell(
                onTap: () {},
              ),
            ),
          ),
          Text('First Text'),
          // add your other widgets
        ],
      ),
    ),
  ),
Ravindra S. Patil
  • 11,757
  • 3
  • 13
  • 40