Inkwell Flutter Widget Example
This article explains how to use inkwell flutter widget to implement material ripple animation in flutter applications using example. Inkwell widget always shows rectangle ripple effect when being touched. We also implement InkResponse widget for circular ripple effect in flutter applications.
There are many properties in inkwell flutter widget. splash color is used to show specific color ripple animation. If splashcolor is null then ThemeData.splashColor will be used. highlight color is used to display highlighted area which is shown immediately when user presses widget.
radius property is used to set radius of inkwell widget. borderRadius is used for clipping radius of containing rectangle. customBorder is used to define custom clip border which overrides borderRadius.
We can also set color when parent widget is focused using focusColor. We can also display color when pointer is hovering over inkwell widget using hoverColor. onHover widget is used to call method when pointer enters or exits inkwell widget.
onTap property is used to call method when user taps widget. onDoubleTap property is used to call method when user double taps widget. We can set callback when user long press widget with the help of onLongPress property.
onTapDown is used to call method when user taps down on widget. We can also cancel tap event using onTapCancel property. We can also detect change of highlight color using onHighlightChanged callback.
We can also set value for widget may request primary focus or not using canRequestFocus property. onFocusChange is used to call handler when focus change. If you want to set initial focus for widget, you can set it using autofocus property.
enableFeedback is used to detect gestures should provide acoustic and/or haptic feedback. excludeFromSemantics property is used to exclude gestures from semantics tree.
Inkwell Flutter Widget
Inkwell widget displays rectangle material ripple effect in flutter applications.
splashColor: Colors.red,
highlightColor: Colors.green.withOpacity(0.5),
child: Icon(Icons.add_location, size: 300),
onTap: (){
},
),
InkResponse Flutter Widget
InkResponse widget can be clipped in flutter applications while InkWell is for rectangle shapes only.
splashColor: Colors.red,
highlightColor: Colors.green.withOpacity(0.5),
child: Icon(Icons.add_location, size: 300),
onTap: (){
},
),
