In this tutorial we will learn how to use Inkwell in Flutter. Its usages with example.
What is Inkwell?
When 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. So this is a clickable widget that have multiple click fuctions.
Inkwell Methods in Flutter
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.
