Equivalent of InkWell in Cupertino style

We already have InkWell widget for tap effect in material style. Is there any equivalent in Cupertino style?

Example here: https://developer.apple.com/design/human-interface-guidelines/ios/images/Gestures_Tap.mp4

After tapping the Sounds & Haptics section, its background color turns into gray immediately.

@pd4d10

Hi @pd4d10
It looks like a proposal
Thank you

@HansMuller

cc: @HansMuller
What kind of approach would be best here?

In the meantime (please forgive mistakes or bad practices, I'm still new to Flutter):

/// An [InkWell] equivalent for Cupertino. Simply colors the background of the container.
class CupertinoInkWell extends StatefulWidget {
  const CupertinoInkWell({
    Key? key,
    required this.child,
    required this.onPressed,
  }) : super(key: key);

  final Widget child;
  final VoidCallback? onPressed;

  bool get enabled => onPressed != null;

  @override
  State<CupertinoInkWell> createState() => _CupertinoInkWellState();
}

class _CupertinoInkWellState extends State<CupertinoInkWell> {

  bool _buttonHeldDown = false;

  void _handleTapDown(TapDownDetails event) {
    if (!_buttonHeldDown) {
      setState(() {
        _buttonHeldDown = true;
      });
    }
  }

  void _handleTapUp(TapUpDetails event) {
    if (_buttonHeldDown) {
      setState(() {
        _buttonHeldDown = false;
      });
    }
  }

  void _handleTapCancel() {
    if (_buttonHeldDown) {
      setState(() {
        _buttonHeldDown = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final enabled = widget.enabled;

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTapDown: enabled ? _handleTapDown : null,
      onTapUp: enabled ? _handleTapUp : null,
      onTapCancel: enabled ? _handleTapCancel : null,
      onTap: widget.onPressed,
      child: Semantics(
        button: true,
        child: _buttonHeldDown ? Container(
          color: CupertinoColors.secondarySystemFill.resolveFrom(context),
          child: widget.child,
        ) : widget.child,
      ),
    );
  }
}

@dkwingsmt

A library can't, and shouldn't implement something simply because of parity.

There is some nuance to this though. The ask itself is kind of odd in "Equivalent of InkWell in Cupertino style". To @dkwingsmt's point we are not going to make an official Cupertino widget that adds ink style widgets to the framework. There is not currently an ink-like affect in Apple's design.

Though, there is a comparatively much more subtle touch effect in Apple's designs. I assume the ask for this issue is to create a reusable wrapper to apply to widgets to display that effect. We manually create it throughout the framework, but have not created a standalone widget for it. Mainly because creating a reusable version requires similar logic to Material's setup and would be fairly complicated to create for an effect that is pretty easy to make for specific use cases.

So #149963 was being worked on towards that goal by a contributor before being dropped. It's not currently being tackled, but is still on our radar, and personally I would really like it in. Besides what's mentioned, it would be really nice to have for the sake of adaptive widgets.

Side note:

to run a CupertinoApp instead of a MaterialApp everything works as long as you wrap things in Material widgets anyway

Not Material widgets, but the Material widget. Inkwell, and it's related widgets are effectively just watching for gestures, the actual painting of the effect has to go on a separate surface widget. If you are writing a MaterialApp, you are likely going to have a Material ancestor when you put an Inkwell somewhere, but it is not guaranteed, and it's often better to be deliberate anyway. In a CupertinoApp, you just have to be deliberate about placing the Material surface.

@nate-thegrate

This issue is assigned to @nate-thegrate and @DerhachevAndrii but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

It looks like my implementation won’t make it into the framework, as the Flutter team prefers to avoid mixing Cupertino and Material imports — a decision I completely support.

That said, while this functionality won’t be available in the framework for now, I’ve published my solution so you can start using it right away.

Simply add the file from gist to your project and pass it to the splashFactory parameter of InkWell or ThemeData:
https://gist.github.com/DerhachevAndrii/9be18815be4bdeaa51e3ff0533032da4

splashFactory: Platform.isIOS ? CupertinoHighlight.splashFactory : InkSparkle.splashFactory

@nate-thegrate

This issue was assigned to @nate-thegrate and @DerhachevAndrii but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

Navigation Menu

Repository navigation

Equivalent of `InkWell` in Cupertino style #48017

38 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Equivalent of InkWell in Cupertino style #48017

Description

Activity

VladyslavBondarenko commented on Dec 31, 2019

TahaTesser commented on Nov 2, 2021

daniele-athome commented on Nov 21, 2021

38 remaining items

MitchellGoodwin commented on Mar 25, 2025

driftwoodstudio commented on Mar 25, 2025

flutter-triage-bot commented on Jul 29, 2025

aderhachev commented on Jul 31, 2025

flutter-triage-bot commented on Oct 14, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Equivalent of `InkWell` in Cupertino style #48017