Open In App
Related Articles

Flutter – InkWell Widget

Like Article
Save Article
Report issue

InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of the inkwell widget using radius and also border-radius using borderRadius. We can give the splash color using splashColor and can do a lot of things.

Constructor of InkWell class:

InkWell({Key key, 
Widget child,
GestureTapCallback onTap,
GestureTapCallback onDoubleTap,
GestureLongPressCallback onLongPress,
GestureTapDownCallback onTapDown,
GestureTapCancelCallback onTapCancel,
ValueChanged<bool> onHighlightChanged,
ValueChanged<bool> onHover,
MouseCursor mouseCursor,
Color focusColor,
Color hoverColor,
Color highlightColor,
MaterialStateProperty<Color> overlayColor,
Color splashColor,
InteractiveInkFeatureFactory splashFactory,
double radius,
BorderRadius borderRadius,
ShapeBorder customBorder,
bool enableFeedback: true,
bool excludeFromSemantics: false,
FocusNode focusNode,
bool canRequestFocus: true,
ValueChanged<bool> onFocusChange,
bool autofocus: false})




import 'package:flutter/material.dart';
void main() {
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InkWell',
      theme: ThemeData(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
  String inkwell='';
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InkWell Widget'),
        actions: <Widget>[
            textScaleFactor: 3,
      backgroundColor: Colors.lightBlue[50],
      body: Center(
        child: Column(
          children: <Widget>[
              onTap: () {
                setState(() {
                  inkwell='Inkwell Tapped';
              onLongPress: () {
                setState(() {
                  inkwell='InkWell Long Pressed';
              child: Container(
                  width: 120,
                  height: 70,
                  child: Center(
                      child: Text(
                        textScaleFactor: 2,
                        style: TextStyle(fontWeight: FontWeight.bold),
              padding: const EdgeInsets.all(8.0),
              child: Text(inkwell,textScaleFactor: 2,),



  • Create a Container and wrap it with the InkWell widget.
  • When InkWell is tapped, it will display “InkWell Tapped” on the screen.
  • When InkWell is LongPressed, it will display “InkWell Long Pressed” on the screen.


When the InkWell container is not tapped, it will result:

When the InkWell Container is tapped, it will result:

When the InkWell Container is Long Pressed, it will result:

Last Updated : 02 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads