Flutter Inkwell With Example

In this tutorial we will learn how to use Inkwell in Flutter. Its usages with example.

Inkwell Flutter
Inkwell Flutter

What is Inkwell In Flutter?

We we want to perform some action on click/double-click/long-press or on tap, then we can use the Inkwell widget in flutter. It is a best widget to perform these types of actions.

Inkwell Methods

Inkwell have some click methods which can be perform while :

  • onTap()
  • onDoubleTap()
  • onLongPress()

Complete Example

Following is the example of Inkwell in flutter with all its features which is as below:

import 'package:flutter/material.dart';

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

  _TestClassState createState() => _TestClassState();

class _TestClassState extends State<TestClass> {
  String _inkwellClick = "";
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Inkwell Demo"),
      body: SingleChildScrollView(
        child: Column(
          children: [
              margin: EdgeInsets.only(top: 30),
              child: Center(
                child: InkWell(
                  child: Text(
                    style: TextStyle(fontSize: 28, color: Colors.black),
                  //single tap
                  onTap: () {
                    setState(() {
                      _inkwellClick = "Inkwell Clicked";
                  //double tap
                  onDoubleTap: () {
                    setState(() {
                      _inkwellClick = "Double Tapped";
                  onLongPress: () {
                    setState(() {
                      _inkwellClick = "Long Press";
              style: TextStyle(fontSize: 28, color: Colors.red),


Will appear when you single tap or single click on the text.

Inkwell Single Tap


This will appear when you double click on the text.

inkwell Double Tap


This will appear when you long press upon the text.

Inkwell Long Press


To understand better, we wrapped a Text with Inkwell then Center then Center. Then we created a string variable. On the function of onTap, onDoubleTap and onLongpress we stored a different string in it and shows below the Inkwell’s text. You can learn more about from here.

Thank you for visiting this tutorial on fluttertpoint. Hope this helped you. Please visit more useful tutorials for flutter development.

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment