[Flutter] GestureDetector를 이용해서 화면을 넘기는 Swipe 감지를 해보자 [기록]

 @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: _onPanUpdate,
      onPanEnd: _onPanEnd,
      child: Scaffold(

화면을 넘기는 Swipe를 GestureDetector는 Pan이라고 한다.

여기에서 onPanUpdate는 사용자가 dragging(화면을 누른 상태로 손가락을 움직이는 상태)할 때를 말하고,

onPanEnd는 사용자가 dragging을 끝냈을 때 콜백되는 함수를 말한다. 

 

onPanUpdate에 들어가는 함수를 봐보자

  void _onPanUpdate(DragUpdateDetails details) {
    if (details.delta.dx > 0) {
      setState(() {
        _direction = Direction.right;
      });
    } else {
      setState(() {
        _direction = Direction.left;
      });
    }
  }

여기에서 오른쪽에서 왼쪽으로 dragging했을 때 detais값을 로그에 찍어본다면 아래와 같이 나오게 되고

 왼쪽에서 오른쪽으로 dragging했을 때 detais값을 로그에 찍어본다면 아래와 같이 나오게 된다.

차이점을 보면 dx가 양수일 때에는 오른쪽에서 왼쪽, dx가 음수일 때에는 왼쪽에서 오른쪽방향으로 이동한다.

 

따라서 dx가 양수, 음수일 경우 분기처리를 하여서 사용자가 어느 방향에서 어느쪽으로 Swipe하는지 알 수 있고,

Dragging이 끝났을 때 처리해주는 onPanEnd 함수에 원하는 함수를 넣어서 아래 코드와 같이 동작 시키면 된다.

  // dragging이 끝났을 경우 (화면에서 터치가 끝났을 때)
  void _onPanEnd(DragEndDetails detail) {
    if (_direction == Direction.left) {
      setState(() {
        _showingPage = Page.second;
      });
    } else {
      setState(() {
        _showingPage = Page.first;
      });
    }
  }