Flutter: InkWell change ripple effect shape

Hi there, I just wanna save a notes again for Flutter, currently I work with many InkWell widget in my personal application and feeling curious how to change that default shape on ripple effect.

Basically when we use InkWell to wrap a widget and put the onTap or other touch listener we want get some animation when user touch the widget, if we do not need the animation we can use GestureDetector instead.

The default of ripple effect on InkWell widget only make rectangle shape when we touch the widget, so how to change that boring shape?

1. customBorder - docs
   If we want to change the shape into circle, for example when we have child widget like an avatar image which popular with circle shape, and by default the shape is BoxShape.rectangle.
   
   sample code
   

   InkWell(
     customBorder: const CircleBorder(),
     onTap: () {
       // TODO: something
     },
     child: Container()
   )
   

   result
   
   

   

   before

   
   

   

   after

   
   
2. borderRadius - docs
   As you can see the result when we use customBorder with CirclerBorder, we got circle as shape our ripple animation, but I don't think that the best shape for that User Interface, so in this case I choose the second approach and we will use the borderRadius to change border radius on our BoxShape.rectangle.
   
   Please remember to read official documentation if you confuse how to use something, for borderRadius, documentation give us notes like this.
   
   
   sample code
   

   InkWell(
     borderRadius: BorderRadius.circular(16.0),
     onTap: () {
       // TODO: something
     },
     child: Container()
   )

   result
   
   
   
   
   
   

Thanks for coming :)