Flutter - Using InkWell and InkResponse Examples

This tutorial shows you how to use InkWell and InkResponse in Flutter with some examples, available properties, and the differences between those two.

For this tutorial, we are going to create a simple layout consisting of the InkWell or InkResponse widget and a counter text that will be incremented every time the Ink widget pressed.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
    int _count = 0;
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Ink Tutorial by Woolha.com'),
          ),
          body: Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Place the InkWell or InkResponse here
                Text (
                    _count.toString(),
                    style: TextStyle(fontSize: 50)
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  

InkWell

InkWell is an area of Material widget that responds when being touched by showing splash. The shape is always rectangle and it clips the splash.

Using InkWell Examples

First, we create an InkWell with yellow splash color and blue highlight color. To increment the counter when the widget pressed, onTap is passed with a function that increments the _count state.

However, in the above output, the splash color is not shown clearly because it's covered by the highlight color. To make it more visible, we can set opacity to the highlight color.

  InkWell(
    splashColor: Colors.yellow,
    highlightColor: Colors.blue,
    child: Icon(Icons.add_circle, size: 50),
    onTap: () {
      setState(() {
        _count += 1;
      });
    },
  ),

Output:

Flutter InkWell

The highlight color is the color for highlighted area which is shown immediately when the user presses the widget. Whereas splash color is shown gradually from the point where the touch happens, creating splash animation effect. That means the splash doesn't always start from the center.

  InkWell(
    splashColor: Colors.yellow,
    highlightColor: Colors.blue.withOpacity(0.5),
    child: Icon(Icons.add_circle, size: 50),
    onTap: () {
      setState(() {
        _count += 1;
      });
    },
  ),

Output:

Flutter InkWell

Below are the properties you can pass to the constructor.

InkWell Properties

Name Type Description
key Key The widget key, used to control if it's should be replaced.
child Widget A child widget that will be placed below this widget in tree.
onTap GestureTapCallback Callback that will be called when the user taps.
onDoubleTap GestureTapCallback Callback that will be called when the user double taps.
onLongPress GestureLongPressCallback Callback that will be called when the user long taps.
onTapDown GestureTapDownCallback Callback that will be called when the user taps down.
onTapCancel GestureTapCancelCallback Callback that will be called when the user cancels the tap.
onHighlightChanged ValueChanged<bool> Defaults to false.
onHover ValueChanged<bool> Called when a pointer enters or exits the ink response area.
focusColor Color The color of the ink response when the parent widget is focused. Defaults to ThemeData.focusColor.
hoverColor Color The color of the ink response when a pointer is hovering over it. Defaults to ThemeData.hoverColor.
highlightColor Color The color of the ink response when pressed. Defaults to ThemeData.highlightColor.
splashColor Color The splash color of the ink response. Defaults to ThemeData.splashColor
splashFactory InteractiveInkFeatureFactory The appearance of the splash. Defaults to ThemeData.splashColor.
radius double The ink splash's radius.
borderRadius BorderRadius Clipping radius of the containing rectangle, only used if customBorder is null.
customBorder ShapeBorder Defines a custom clip border that overrides borderRadius.
enableFeedback bool Whether detected gestures should provide acoustic and/or haptic feedback.
excludeFromSemantics bool Whether to exclude the gestures introduced by this widget from the semantics tree.
focusNode FocusNode Focus node for the widget (optional).
canRequestFocus bool Whether the widget may request the primary focus
onFocusChange ValueChanged<bool> Handler called when the focus change
autofocus bool Whether the widget will be selected as the initial focus.

InkResponse

InkResponse is an area of Material widget that responds when being touched by showing splash. Unlike InkWell, the shape of InkResponse can be configured. You can also configure whether it should clip the splash.

Using InkResponse Examples

  InkResponse(
    splashColor: Colors.yellow,
    highlightColor: Colors.blue.withOpacity(0.5),
    child: Icon(Icons.add_circle, size: 50),
    onTap: () {
      setState(() {
        _count += 1;
      });
    },
  )

Output:

Flutter InkResponse

  InkResponse(
    highlightShape: BoxShape.rectangle,
    splashColor: Colors.yellow,
    highlightColor: Colors.blue.withOpacity(0.5),
    child: Icon(Icons.add_circle, size: 50),
    onTap: () {
      setState(() {
        _count += 1;
      });
    },
  )

Output:

Flutter InkResponse

InkResponse Properties

The properties are similar to InkWell, but it also has containedInkWell and highlightShape.

Name Type Description
key Key The widget key, used to control if it's should be replaced.
child Widget A child widget that will be placed below this widget in tree.
onTap GestureTapCallback Callback that will be called when the user taps.
onDoubleTap GestureTapCallback Callback that will be called when the user double taps.
onLongPress GestureLongPressCallback Callback that will be called when the user long taps.
onTapDown GestureTapDownCallback Callback that will be called when the user taps down.
onTapCancel GestureTapCancelCallback Callback that will be called when the user cancels the tap.
onHighlightChanged ValueChanged<bool> Called when becomes highlighted or stops being highlighted.
onHover ValueChanged<bool> Called when a pointer enters or exits the ink response area.
containedInkWell bool Whether this ink response should be clipped its bounds.
highlightShape BoxShape The highlight shape when pressed. Defaults to BoxShape.circle.
focusColor Color The color of the ink response when the parent widget is focused. Defaults to ThemeData.focusColor.
hoverColor Color The color of the ink response when a pointer is hovering over it. Defaults to ThemeData.hoverColor.
highlightColor Color The color of the ink response when pressed. Defaults to ThemeData.highlightColor.
splashColor Color The splash color of the ink response. Defaults to ThemeData.splashColor
splashFactory InteractiveInkFeatureFactory The appearance of the splash. Defaults to ThemeData.splashColor.
radius double The ink splash's radius.
borderRadius BorderRadius Clipping radius of the containing rectangle, only used if customBorder is null.
customBorder ShapeBorder Defines a custom clip border that overrides borderRadius.
enableFeedback bool Whether detected gestures should provide acoustic and/or haptic feedback.
excludeFromSemantics bool Whether to exclude the gestures introduced by this widget from the semantics tree.
focusNode FocusNode Focus node for the widget (optional).
canRequestFocus bool Whether the widget may request the primary focus
onFocusChange ValueChanged<bool> Handler called when the focus change
autofocus bool Whether the widget will be selected as the initial focus.