Where touch-based interaction increases the usefulness of an application, adding visual feedback makes the application more appealing. This is what Inkwell Flutter does to your application interfaces.
Like several other widgets offered by Flutter, GestureDetector, and Flutter Inkwell are two widgets that respond to touch inputs. Inkwell Flutter is one step ahead of GestureDetector, which implements a material design ink splash on touch interactions.
Let’s delve deep into how Inkwell Flutters’ ripple effect is created and how it enhances the user experience with mobile applications.
What Is InkWell Flutter?
Flutter Inkwell is a material widget in Flutter that responds to every touch user makes while using an application. It is more like a visual representation of what happens when we long-press or double-click the button. When we touch a button, it creates a ripple effect, like through a pebble within the water stream.
It ensures the user that the application has received your command.
Flutter Inkwell Class
Flutter Inkwell class is a rectangular block of material widget that provides the area that responds to every touch. It initiates an immediate ripple response on the screen immediately after the touch.
Using Inkwell With Material Widget
To do this, you must wrap the Flutter Inkwell widget with the Material widget. When you tap the Material widget, the Flutter Inkwell onTap function is called, and ‘Material widget tapped!’ will be printed on the console. After that, you can set a background color (in this case, the color is yellow) and select the container dimension to 100 pixels from both width and height.
The Flutter Inkwell class always uses a material widget as an ancestor to ensure the ink is splashed rightly into the rectangular space.
Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
print('Material widget tapped!');
},
child: const SizedBox(
width: 100.0,
height: 100.0,
child: Center(child: Text('Tap Me')),
),
),
),
You can also alter the highlight and splash colors according to your preference. In the following example, we have modified the Flutter Inkwell color, i.e., the splash color turns out red, and the highlight color is black. We have also adjusted the opacity of colors to enhance transparency. In the following example, we changed the red color (splash color) adjusted with 30% opacity while highlight colors have an opacity of 50%/
Here is how you can do it:
Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
print('Material widget tapped!');
},
splashColor: Colors.red.withOpacity(0.3),
highlightColor: Colors.black.withOpacity(0.5),
child: const SizedBox(
width: 100.0,
height: 100.0,
child: Center(child: Text('Tap Me')),
),
),
),
We can also adjust the Inkwell Flutter shape by customizing the Inkwell Flutter shape just like the color. Generally, it appears as a rectangular block. We can use the ‘borderRadius’ or ‘customBorder’ property.
Here is how you can do it:
- With customBorder Property:
Material(
color: Colors.yellow,
child: InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
onTap: () {
print('Material widget tapped!');
},
child: const SizedBox(
width: 100.0,
height: 100.0,
child: Center(child: Text('Tap Me')),
),
),
),
Below is the inkwell flutter animation:
- With borderRadius Property:
Material(
color: Colors.yellow,
child: InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () {
print('Material widget tapped!');
},
child: const SizedBox(
width: 100.0,
height: 100.0,
child: Center(child: Text('Tap Me')),
),
),
)
Below is the inkwell flutter animation for borderradius property:
What is the Purpose of Inkwell in Flutter?
Have you ever thought, What Inkwell Flutter is used for?
Generally, InkWell manages the touch interactions within the application. The following are the purposes of the Inkwell Flutter Widget:
- When a user taps, long presses, or double taps on a widget, InkWell pays attention to their movements. It detects these motions and initiates the necessary callbacks, enabling you to react to user interactions.
- Other widgets, such as text, photos, or containers, can be wrapped in InkWell to make them interactive. As a result, you may design interactive UI elements.
- The InkWell ripple effect ensures that the widget complies with material design guidelines.
Also Read – Mastering Dismissible in Flutter: Unlock the Power of Swipe Gestures
Common Gestures In Inkwell Flutter
Since Inkwell Flutter is all about touch interactions, it responds to the following gestures:
- onTap: this gesture is initiated when the user taps the widget.
- onLongPress: this gesture is initiated when the user presses the button and holds it for a while.
- onTapCancel: this gesture is not familiar, but It starts when a user starts to make a tap motion but stops it by lifting their finger off the widget before releasing it. It has nothing to do with stopping a tap by tapping again specifically.
- onHover: When the cursor touches the borders of the widget, this is triggered. Once the pointer leaves the widget’s borders, the onHover property won’t be invoked again until it returns.
- onFocusChange: When the attention of the InkWell widget shifts, the onFocusChange attribute is activated. This might occur if the user presses the widget if the widget receives programmatic focus, or if another widget catches the user’s attention. Whether the widget has gained focus (true) or lost focus (false) is indicated by a boolean value given to the callback.
When the focus of the Inkwell widget changes, you can use the onFocusChange property to take any action you desire. For instance, you may launch a new screen, alter the widget’s color, or reveal or conceal a keyboard.
How Do You Remove Ripple Effect From InkWell Flutter?
You can remove the Inkwell ripple effect by turning the value of highlightColor and splashColor to Colors.transparent.
Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
print('InkWell tapped!');
},
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: const SizedBox(
width: 100.0,
height: 100.0,
child: Center(child: Text('Tap Me')),
),
),
),
This is how the code appears visually:
Flutter Gesturedetector vs. Inkwell
Though both work on touch interaction, the output is different for each. Where the Flutter GestureDetector takes in the touch interaction with the application, Inkwell Flutter puts it visually onto the screen by displaying a ripple effect. A GestureDetector Flutter is a non-visual widget, whereas InkWell displays what a GestureDetector does backstage on the screen.
Besides this, both Inkwell and GestureDetector l can use only the onTap, onLongpressed, or other mentioned gestures; the GestureDetector can also use more profound controls such as pinch, swipe, or dragging properties.
Putting is simple; InkWell adds a decorative touch to your application, whereas the GestureDetector takes the back seat.
Conclusion
Like another widget in the Flutter cross-platform framework, the Flutter Inkwell holds the same significance. It enhances the user experience by adding a ripple effect each time the widget is tapped. Though simple and more detailed. It gives a visual overview to the user of its touch interactions.
