CODEWITHSUNDEEP
flutterdartmobileflutter-layoutflutter-dependencies
Ekhlass T
Ekhlass T

Reputation: 63

how to customize the on tap effect (ripple) in flutter?

InkWell(
          onTap: () {
            print('on tap event');
          },
          child: CachedNetworkImage(
            imageUrl:
                'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSgjoaDvMpuEfm96oHtpEVbwtfIscO8GPuTsA&usqp=CAU',
            imageBuilder: (context, imageProvider) => Container(
              width: 80.0,
              height: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: imageProvider,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),

I want to use chached_nework_image package in flutter to display my images, also I want these images to be circular, and have the on tap event, I tried to make all these requirements, but I have an issue, which is the effect of the on tap event, the ripple is squared not circular, can anyone help and suggest a good idea to me, to customize the ripple and make it circular instead, or even to make the whole solution in a different way.

Upvotes: 1

Views: 277

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7563

Flutter classes are very well documented and give you a list of alternative/additional classes you can look at. If you look at the docs in InkWell you will find this:

///  * [InkResponse], a variant of [InkWell] that doesn't force a rectangular
///    shape on the ink reaction.

Upvotes: 1

Related Questions