[flutter] getX 함수를 사용하여 터치 이벤트에 따른 원형 메뉴 구현하기

04 Dec 2023

flutter

이번 포스트에서는 Flutter의 getX 함수를 사용하여 터치 이벤트에 따른 원형 메뉴를 구현하는 방법에 대해 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter의 get 패키지에서 제공하는 함수로, 사용자의 터치 이벤트를 쉽게 감지할 수 있는 기능을 제공합니다. 이 함수를 사용하면 사용자의 터치 위치를 쉽게 파악할 수 있으며, 이를 토대로 어떤 동작을 수행할지 결정할 수 있습니다.

원형 메뉴 구현하기

먼저, getX 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 다음 코드를 추가합니다.
```
dependencies:
  get: ^x.x.x  # x.x.x는 최신 버전을 의미합니다.
```

원형 메뉴를 구현할 StatefulWidget을 생성합니다.

class CircularMenu extends StatefulWidget {
  @override
  _CircularMenuState createState() => _CircularMenuState();
}

StatefulWidget의 createState 메서드에서 원형 메뉴를 구성하고, getX 함수를 사용하여 터치 이벤트를 처리합니다.

class _CircularMenuState extends State<CircularMenu> {
  double centerX = 0.0; // 중심 위치 X 좌표
  double centerY = 0.0; // 중심 위치 Y 좌표

  @override
  Widget build(BuildContext context) {
    // 원형 메뉴 구성
    return GestureDetector(
      onPanStart: (details) {
        // 터치 시작 시 중심 위치 갱신
        setState(() {
          centerX = details.globalPosition.dx;
          centerY = details.globalPosition.dy;
        });
      },
      onPanUpdate: (details) {
        // 터치 이동 시 중심 위치 갱신
        setState(() {
          centerX = details.globalPosition.dx;
          centerY = details.globalPosition.dy;
        });
      },
      child: CustomPaint(
        painter: CircularMenuPainter(centerX, centerY),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Center(
            child: Text(
              'Tap and Drag',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

원형 메뉴를 그리기 위한 CustomPainter를 생성합니다.

class CircularMenuPainter extends CustomPainter {
  final double centerX;
  final double centerY;

  CircularMenuPainter(this.centerX, this.centerY);

  @override
  void paint(Canvas canvas, Size size) {
    // 중심 위치 기준으로 원형 메뉴 그리기
    // ...
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

이제 원형 메뉴가 구현되었습니다. 원하는 동작을 onPanStart 또는 onPanUpdate 이벤트 핸들러에서 처리하면 됩니다.

이제 getX 함수를 사용하여 터치 이벤트에 따라 동작하는 원형 메뉴를 구현하는 방법에 대해 알아보았습니다. getX 함수를 사용하면 사용자의 터치 위치를 쉽게 파악할 수 있으며, 이를 활용하여 다양한 인터랙션을 구현할 수 있습니다.

더 자세한 내용은 getX 패키지의 공식 문서를 참고하시기 바랍니다.

getX 패키지 공식 문서

Happy coding!