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

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);

  @override
  _TestClassState createState() => _TestClassState();
}

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

onTap()

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

onDoubleTap()

This will appear when you double click on the text.

onLongPress()

This will appear when you long press upon the text.

Explanations

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.