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 NameTypeDescription
childWidgetask for the widget on which to show ink animation. it creates the InkWell
radiusDoubleAsk for the radius up to which point shows the splashed color
onTapCallback FunctionCalled 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/

Leave a Comment

Your email address will not be published. Required fields are marked *