What is InkWell in Flutter?

Introduction

I

A flutter’s material widget is InkWell. It reacts to touch actions done by the user. When the user hits the button, Inkwell will reply. There are several motions available, such as double-tap, long press, tap down, and so on. This widget has several characteristics, which are shown below. We may set the radius of the inkwell widget with radius and the border radius with borderRadius. We may use splash color to give the splash color and accomplish a variety of things. In Flutter, an InkWell class is a rectangular region of a substance that responds to touch in an application.

The ink reactions are carried out in the material widget. When the user taps the button, the InkWell responses act.

Parameters and Gestures

Parameters Name	Type	Description
child	Widget	ask for the widget on which to show ink animation. it creates the InkWell
radius	Double	Ask for the radius up to which point shows the splashed color
onTap	Callback Function	Called when the User taps the button a single time
onDoubleTap	Callback Function	Called when the User double taps this part of the material
onLongPress	Callback Function	Called when the user long presses this part of the material
onTapDown	Callback Function	Called when the user cancels a tap that was started on this part
onTapCancel	Callback Function	Called when the user taps down this part of the material
onHover	Callback Function	When Hovered over the material this function is called

• Example of InkWell project

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
	
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
	return MaterialApp(
	title: 'InkWell',
	theme: ThemeData(
		primarySwatch: Colors.blue,
	),
	home: MyHomePage(),
	debugShowCheckedModeBanner: false,
	);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

String inkwell='';

@override
Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
		title: Text('InkWell Widget'),
		backgroundColor: Colors.green,
		actions: <Widget>[
		Text(
			'GFG',
			textScaleFactor: 3,
		)
		],
	),
	backgroundColor: Colors.lightBlue[50],
	body: Center(
		child: Column(
		mainAxisAlignment: MainAxisAlignment.center,
		children: <Widget>[
			InkWell(
			onTap: () {
				setState(() {
				inkwell='Inkwell Tapped';
				});
			},
			onLongPress: () {
				setState(() {
				inkwell='InkWell Long Pressed';
				});
			},
			child: Container(
				color: Colors.green,
				width: 120,
				height: 70,
				child: Center(
					child: Text(
						'Inkwell',
						textScaleFactor: 2,
						style: TextStyle(fontWeight: FontWeight.bold),
					))),
			),

			Padding(
			padding: const EdgeInsets.all(8.0),
			child: Text(inkwell,textScaleFactor: 2,),
			)
		],
		),
	),
	);
}
}

Output

When a container is not tapped, it remains unchanged:

However, tapping the container will result in:

And when the container is long pressed, the following will happen:

Conclusion

Buttons were part of the early functionalities that website developers used to help visitors understand how to navigate this new online world.As sites and design have evolved, so too have buttons, although, over the course of time, it seems that fewer and fewer websites are making effective use of this highly-efficient visual cue.

As discussed above, the InkWell widgets include the capacity to detect the user’s interaction with the screen. InkWell, in summary, offers additional visible replies to capture the user’s input.

References:
https://www.educative.io/answers/what-is-inkwell-in-flutter
https://www.geeksforgeeks.org/flutter-inkwell-widget/
https://www.allaboutflutter.com/flutter-inkwell-widget-full-guide
https://daniasblog.com/flutter-inkwell-vs-gesturedetector/