CODEWITHSUNDEEP
flutter
Saya
Saya

Reputation: 302

How to enable swiping on all 4 directions in the Dismissible Widget in Flutter?

I am building a puzzle app in Flutter and I am using the Dismissible inside a GridView to detect swipes on the tiles of the puzzles.

The problem is, I can dismiss a widget either in left-right or up-down direction at a time.

Is there a way to to enable all the four directions?

This is the function that returns the Dismissible:

  Dismissible getPiece(Piece piece) {
    return Dismissible(
      direction: DismissDirection.horizontal,
      onDismissed: (direction) {
        print(direction);
      },
      key: UniqueKey(),
      child: Container(
        decoration: BoxDecoration(
          color: pieceColor,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              spreadRadius: 0,
              blurRadius: 3,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Center(
          child: Text(
            value,
            style: TextStyle(
                color: valueColor, fontSize: 30, fontWeight: FontWeight.w500),
          ),
        ),
      ),
    );
  }

Upvotes: 0

Views: 1168

Answers (1)

Saatwik
Saatwik

Reputation: 48

As @pskink suggested, you cannot swipe on all four directions by default so you can create your own widget or create a copy of Dismissible.

Here's what you can change to achieve swipe on all 4 directions.

First, copy the dismissible.dart file to your project and rename Dismissible to any name of your choice - MyDismissible for example.

Create a new DismissibleDirection - all for example,

enum DismissDirection {
  vertical,
  horizontal,
  endToStart,
  startToEnd,
  up,
  down,
  none,
  all,
}

Then you need to change only a few more things at the end of the dismissible.dart.

If the dismiss direction is all, we get the direction of swipe from GestureDetector. If it is vertical, the set direction to DismissDirection.vertical and if it's horizontal, set it to DismissDirection.horizontal.

if (widget.direction == DismissDirection.none) {
  return content;
}

// THIS IS THE EXTRA IF THAT IS TO BE ADDED
if (widget.direction == DismissDirection.all) {
  return GestureDetector(
    onHorizontalDragStart: ((details) {
      widget.direction = DismissDirection.horizontal;
      _handleDragStart(details);
    }),
    onHorizontalDragUpdate: _handleDragUpdate,
    onHorizontalDragEnd: _handleDragEnd,
    onVerticalDragStart: ((details) {
      widget.direction = DismissDirection.vertical;
      _handleDragStart(details);
    }),
    onVerticalDragUpdate: _handleDragUpdate,
    onVerticalDragEnd: _handleDragEnd,
    behavior: widget.behavior,
    dragStartBehavior: widget.dragStartBehavior,
    child: content,
  );
}

return GestureDetector(
  onHorizontalDragStart: _directionIsXAxis ? _handleDragStart : null,
  onHorizontalDragUpdate: _directionIsXAxis ? _handleDragUpdate : null,
  onHorizontalDragEnd: _directionIsXAxis ? _handleDragEnd : null,
  onVerticalDragStart: _directionIsXAxis ? null : _handleDragStart,
  onVerticalDragUpdate: _directionIsXAxis ? null : _handleDragUpdate,
  onVerticalDragEnd: _directionIsXAxis ? null : _handleDragEnd,
  behavior: widget.behavior,
  dragStartBehavior: widget.dragStartBehavior,
  child: content,
);

Upvotes: 1

Related Questions