Flutter – InkWell Widget

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})

Example:

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<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,),
            )
          ],
        ),
      ),
    );
  }
}

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:

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: