Élie
Élie

Reputation: 1

Flutter: GestureDetector onPan inverted on web but only on ios device

I'm trying to move a player with swipe (using onPan), when I build for the web it works as expected on desktop and android but is inverted (eg: you have to swipe right to go left) on ios.

I've used chrome on the three devices. (Also tried with Firefox on desktop, Opera on android and Edge on iPhone but the problem still only occur on iPhone). Here's my code for moving the player:

class _PlayerState extends State<Player> {
  Data? data;
  bool hasMoved = false;

  @override
  Widget build(BuildContext context) {
    data = Provider.of<Data>(context);
    
    return GestureDetector(
      onPanUpdate: (details) {
      if (hasMoved) return;
      if ((details.delta.dx).abs()<(details.delta.dy).abs()) { //vertical
        if (details.delta.dy>0) {//down
          data!.changePosition(0,1);
          hasMoved = true;
        }else if (details.delta.dy<0) {//up
          data!.changePosition(0,-1);
          hasMoved = true;
        }
      }else { //horizontal
        if (details.delta.dx>0) {//right
          data!.changePosition(1,0);
          hasMoved = true;
        }else if (details.delta.dx<0) {//left
          data!.changePosition(-1,0);
          hasMoved = true;
        }
      }},
      onPanEnd: (details) {hasMoved = false;},
      child: Container( //The maximal size transparent container allow the detection of the swipe anywhere and not only on the player
      color: Colors.transparent, //without the color the detection only happen on the player
      width: double.infinity,
      height: double.infinity,
      alignment: FractionalOffset((data!.position.$1)/30, (data!.position.$2)/16), //the playing board is 30 by 16
      child: FractionallySizedBox( //The player has a size of 1.4.
        widthFactor: 1.4/30,
        heightFactor: 1.4/16,
        child: Focus(
      canRequestFocus: true,
      autofocus: true, //So that the keyboard input are detected
      onKeyEvent: (node, event) {
        if (event is KeyUpEvent) {
          return KeyEventResult.ignored;
        }
        if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
          data!.changePosition(0,1);
        } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
          data!.changePosition(0,-1);
        } else if (event.logicalKey == LogicalKeyboardKey.arrowRight) {
          data!.changePosition(1,0);
        } else if (event.logicalKey == LogicalKeyboardKey.arrowLeft) {
          data!.changePosition(-1,0);
        } else {
          return KeyEventResult.ignored;
        }
        return KeyEventResult.handled;
      },
      child: const ImageObject(image: "player.png", width: double.infinity, height: double.infinity),
      ),
    ))
    );
  }
}

I've not been able to reproduce the bug with the inspector tool to simulate mobile devices. If anyone has any idea where the bug might come from please let me know as I have not found anyone having a similar issue which is even weirder.

Upvotes: 0

Views: 45

Answers (0)

Related Questions