Flutter InkWell Widget (original) (raw)

Last Updated : 3 Oct, 2025

**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.

**Syntax:

InkWell(
onTap: () {
// Your action here
},
child: YourWidget(),
)

Key Features of InkWell

• Adds ripple animation on tap (like native Material Design).
• Responds to gestures: onTap, onDoubleTap, onLongPress, etc.
• Lightweight and easy to use.
• Can be applied to any widget, even custom ones.

**Step-by-step implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the **following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Start Coding

**main.dart

Dart `

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 {

String inkwell='';

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('InkWell Widget'), backgroundColor: Colors.green, actions: [ Text( 'GFG', textScaleFactor: 3, ) ], ), backgroundColor: Colors.lightBlue[50], body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ 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,),
        )
      ],
    ),
  ),
);

} }

`

**Explanation:

• 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.

**Output:

Customizing InkWell

You can customize its behavior using these properties:

Conclusion

The InkWell widget is perfect when you want to give your users visual feedback on touch interactions, especially when building custom buttons, cards, or tappable containers.

It’s a small but powerful widget that makes your app feel more interactive and native.