Flutter: InkWell Widget

Inkwell Widget is a gesture-detecting widget. A splash colour appears whenever tapped on the widget. Contrary to the Gesture Detector, this widget provides very few functionalities and is mainly focused on the Material Design of Google. That means the animations, and colours follow the Material standards.

Syntax

The InkWell widget can be used as a Button or a Gesture Detector to perform tap or long-press. The InkWell widget does not have any required parameters, so we can use it as follows:

InkWell(),

Now InkWell itself won't work, so we can provide it with a child widget (Icon or Text), an onTap() function, etc.

InkWell(
  onTap: () {
    // Do Something
  },
  child: Text(
      "This is InkWell",
  ),
),

Parameters

onTap and child are not the only parameters. We have a bunch of parameters described below.

Important Parameters:

Parameter Name	Type	Description	Default Value
child	Widget	This parameter asks for the widget on which to show ink animation. It creates the InkWell	Nullable
splashColor	Color	Specifies the ink colour.	Derived from the theme.
radius	Double	It asks for the radius up to which to show the splashed colour.	Default is whole area of the child widget.
onTap	Callback Function	From the name, we can understand that it will try to perform the code written inside it.	Empty Function
onDoubleTap	Callback Function	This is similar to the onTap function but it responds to the double-tap gesture of the user.	Empty Function
onLongPress	Callback Function	When long pressed on the InkWell, this function is called.	Empty Function
onHover	Callback Function	When hovered over the material, this function is called.	Empty Function

Other Parameters Generally Used

Parameter Name	Type	Description	Default Value
enableFeedback	bool	Devices that support can have touch or vibration feedback on tap and long press.	true
canRequestFocus	bool	If true, this widget might ask for the primary focus.	true
highlightColor	Color	The colour when the material/Inkwell is highlighted.	Inherited from the Theme.
hoverColor	Color	The colour when it is being hovered	From Theme.
onTapCancel	Callback Function	Called when the user cancels the tap which the user started on the InkWell.	Empty Function
onTapDown	Callback Function	Called as soon as the user taps down the InkWell.	Empty Function
autofocus	bool	This widget will be primarily active or selected at the start if true.	false
customBorder	ShapeBorder	This is for designing purposes and creates a border around InkWell	Null
borderRadius	Decimal	The clipping radius of the border.	Null

There are other parameters as well but are required for advanced use only.

Simple Example

In the following example, we have used the following parameters:

splashColor: Blue
onTap: To create a Snackbar and display a message.
child: A Text Widget.

class InkWellWidgetTutorial extends StatefulWidget {
  const InkWellWidgetTutorial({Key? key}) : super(key: key);

  @override
  _InkWellWidgetTutorialState createState() => _InkWellWidgetTutorialState();
}

class _InkWellWidgetTutorialState extends State<InkWellWidgetTutorial> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("InkWell Widget Tutorial"),
      ),
      body: Center(
        child: InkWell(
          splashColor: Colors.blue,
          onTap: () {
            // Do Something
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text(
                  "Welcome to AllAboutFlutter",
                  style: TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            );
          },
          child: const Padding(
            padding: EdgeInsets.all(32.0),
            child: Text(
              "This is InkWell",
              style: TextStyle(
                fontSize: 32.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output

InkWell Errors

InkWell splashes are not visible whenever there is an Opaque widget graphic, which means a coloured Container, Image or any other widget. The reason is that InkWell widget splash acts as ink splash on the Material itself. Any Opaque Widget is above Material that hides the splash.

Example

Container(
  color: Colors.red,
  child: Center(
    child: InkWell(
      ...
    ),
  ),
),

Remedy

Use a Material in between opaque graphic and the InkWell because InkWell needs a Material to be visible on.