The default set of Buttons in Flutter is very cool. But what if we have to design a custom button? Like an Image with rounded corners, when we click on it, it takes is to a details page.

In this scenario, we can use InkWell widget. The InkWell widget has properties like onTap So we can put our function to be executed in that method.

Suppose YourWidget is our custom fancy widget that we want to make a button.

InkWell(
  child: YourWidget();
  onTap: (){
    print("I got pressed!");
    //Put anything we have to execute here
  }
)

The above code will print I got pressed in the console. That’s it. To make a widget a button, all we have to do is, wrap it with inkWell and provide a function in onTap method!

There is one catch,

:warning: In order to have these splash effects, the InkWell widget should have a material ancestor. Otherwise, it’ll not have that ripple/splash effets. And if we don’t need those, we can just use a GestureDetector.

Let me know your suggestions and opinions in Twitter or drop a mail a [email protected].

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.