Flutter: InkWell Widget - Full Guide

Flutter: InkWell Widget - Full Guide

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 NameTypeDescriptionDefault Value
childWidgetThis parameter asks for the widget on which to show ink animation. It creates the InkWellNullable
splashColorColorSpecifies the ink colour.​Derived from the theme.
radiusDoubleIt asks for the radius up to which to show the splashed colour.Default is whole area of the child widget.
onTapCallback Function​From the name, we can understand that it will try to perform the code written inside it.Empty Function
onDoubleTapCallback FunctionThis is similar to the onTap function but it responds to the double-tap gesture of the user.Empty Function
onLongPressCallback FunctionWhen long pressed on the InkWell, this function is called.Empty Function
onHoverCallback FunctionWhen hovered over the material, this function is called.Empty Function

Other Parameters Generally Used

Parameter NameTypeDescriptionDefault Value
enableFeedbackboolDevices that support can have touch or vibration feedback on tap and long press.true
canRequestFocusboolIf true, this widget might ask for the primary focus.true
highlightColorColorThe colour when the material/Inkwell is highlighted.Inherited from the Theme.
hoverColorColorThe colour when it is being hoveredFrom Theme.
onTapCancelCallback FunctionCalled when the user cancels the tap which the user started on the InkWell.Empty Function
onTapDownCallback FunctionCalled as soon as the user taps down the InkWell.Empty Function
autofocusboolThis widget will be primarily active or selected at the start if true.false
customBorderShapeBorderThis is for designing purposes and creates a border around InkWellNull
borderRadiusDecimalThe 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(
        ....
      ),
    ),
  ),
)

Did you find this article valuable?

Support All About Flutter | Flutter and Dart by becoming a sponsor. Any amount is appreciated!