top of page

Flutter: InkWell Widget - Full Guide

Updated: Nov 27, 2022

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, 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. InkWell widget does not have any required parameter, 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.

Example

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


bottom of page