CODEWITHSUNDEEP
flutterdartweb
Chrissi
Chrissi

Reputation: 301

Flutter - Inkwell: Why does onHover() require onTap()?

I use the following code:

  Widget getSelectSortBy() {
    return InkWell(
        onHover: (value) {
          setState(() {
            _isHoveringSortBy = value;
          });
        },
        // onTap needs to be implemented
        // otherwise onHover does NOT work! */don't know why/*
        onTap: () => {},
        child: AnimatedContainer(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(16)),
                color: blueSortBy,
                border: Border.all(
                    color: _isHoveringSortBy
                        ? Colors.white
                        : Colors.transparent,
                    width: 1.0)),
            duration: timeHoveringBottomAnimatedContainer,
            padding: EdgeInsets.only(top: 8, bottom: 9, left: 20, right: 28),
            child: Row(
               // rest of the code of Row
            )     
   );
  }

I figured out that I need to implement the onTap() method for the InkWell Widget. Otherwise, the onHover() method won't work.

The question now is, why is this necessary? Or have I implemented something wrong?

Note: I tested this on Chrome with Flutter for the web. (I don't know if there are different circumstances.)

Upvotes: 4

Views: 1536

Answers (1)

Jayasurya
Jayasurya

Reputation: 768

From an interaction design perspective, it does not make sense to give visual feedback when the widget itself is not interactive in any way (tap, double tap or long press). This might be the reason.

If you need to override the behavior (which is okay), an empty callback seems to work fine.

In-depth

If you inspect the Inkwell widget, you'll find that the Inkwell widget is considered enabled only if any of these three are available: onTap, onDoubleTap, onlongPress

// Line 1034

bool _isWidgetEnabled(_InkResponseStateWidget widget) {
        return widget.onTap != null || widget.onDoubleTap != null || widget.onLongPress != null;
    }

bool get enabled => _isWidgetEnabled(widget);

And, the Hover event is handled only when it is enabled.

// Line 1040
// MouseEnter /Hover event
// Calls _handleHoverChange() if enabled

void _handleMouseEnter(PointerEnterEvent event) {
    _hovering = true;
    if (enabled) {
      _handleHoverChange();
    }
  }


// Line 1054
// Calls updateHighLight()

void _handleHoverChange() {
    updateHighlight(_HighlightType.hover, value: _hovering);
  }

if you dig through, you'll find updateHighlight() is the one that handles the onHover callback.

PS. The answer is rough, but hopefully you get the point.

Upvotes: 8

Related Questions