Flutter: InkWell Examples

Updated: February 10, 2023 By: A Goodman Post a comment

A few examples of using the InkWell widget in Flutter to create a rectangular area that responds to touch like a button.

Example 1: Simple Usage

Demo (the ripple effect you see in the GIF below won’t be as good as in real life):

The code:

Scaffold(
      appBar: AppBar(title: const Text('Kindacode.com')),
      body: Center(
        child: InkWell(
            child: Container(
              width: 200,
              height: 80,
              alignment: Alignment.center,
              child: const Text(
                'Example 1',
                style: TextStyle(fontSize: 24),
              ),
            ),
            onTap: () {
              debugPrint('InkWell tapped');
              // do something
            }),
      ),
    );

Example 2: Using InkWell with Material

By wrapping the InkWell widget inside a Material widget, we can set a background color. Here’s how it works (I’m really sorry that the GIF can’t convey the awesomeness of the animation):

The code:

Scaffold(
      appBar: AppBar(title: const Text('Kindacode.com')),
      body: Center(
        child: Material(
          color: Colors.amber,
          child: InkWell(
            hoverColor: Colors.orange,
            splashColor: Colors.red,
            focusColor: Colors.yellow,
            highlightColor: Colors.purple,
            child: Container(
              width: 200,
              height: 80,
              alignment: Alignment.center,
              child: const Text('Example 2'),
            ),
            onTap: () {
              // Do somthing
            },
          ),
        ),
      ),
);

See also: Ways to Create Typewriter Effects in Flutter

API

InkWell class constructor:

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

You can find more detailed information about each property in the official docs.

Final Words

We’ve walked through a few examples of implementing the InkWell widget. If you’d like to explore more new and exciting things in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles