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:

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:

Below are the properties you can pass to the constructor.

InkWell Properties

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:

  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:

InkResponse Properties

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