Flutter – InkWell Widget

22 Mar, 2021
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.
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:
Flutter
Flutter-widgets
Articles
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.