flutter GestureDetector 움직임이 느리네??

최근 flutter로 개인프로젝트를 하고 있다

flutter를 사용한 이유는 여러가지 이지만 이 글에서 말할건 아닌거 같아 넘어가겠다.

(기회가 있다면 설명...)

 

아무튼 flutter는 너무 편리하다

특히 백엔드 개발을 주로하는 나같은 개발자에게  UI에 신경쓸 많은 시간을 아껴준다

 

본론으로 돌아와서

축구 전술을 설정하는 기능을 만들기 위해 마우스 드래그 기능이 필요했다

플러터의 사용자 동작(제스터)를 감지하는 GestureDetector위젯을 사용했다
그런데 아이콘은 잘 되는데 선수들은 느리게 반응했다.

 

우선 코드를 보고 생각해보자

(index) => _buildPlayer(
        position: redPlayerPositions[index],
    )

Widget _buildPlayer({
    ...
    required Offset position,
    ...
  }) {
      ...
      ...
      ...
      
      child: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            final newDx = (position.dx * fieldWidth + details.delta.dx) / fieldWidth;
            final newDy = (position.dy * fieldHeight + details.delta.dy) / fieldHeight;

 

드래그 중 onPanUpdate 이벤트가 지속적으로 호출되며,

각 이벤트는 드래그된 거리를 나타내는 details.delta를 전달

onPanUpdate에서 현재 위치를 기준으로 delta를 누적하여 새로운 위치를 계산한다.

 

그런데 첫번째 코드는 인자로 받아온 position값 그대로를 사용하고 있다.

여기서 문제가 발생했는데 확인하기까지 생각보다 오래걸렸다

 

 

즉

1. position은 _buildPlayer 함수가 호출될 당시의 값이며, 상태값이 아닌 초기 값을 유지

2. redPlayerPositions[index] 또는 bluePlayerPositions[index]에 최신 값이 저장되어도, position 자체는 이전 값으로 고정

3. 결과적으로 매번 과거 값을 기준으로 계산하므로 이동량이 정상적으로 누적되지 못함

 

 

Widget _buildPlayer({
    ...
    required Offset position,
    ...
  }) {
      ...
      ...
      ...
child: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            // 실제 현재 상태값을 사용하여 계산
            final currentPosition = color == Colors.red
                ? redPlayerPositions[index]
                : bluePlayerPositions[index];

            final newDx = (currentPosition.dx * fieldWidth + details.delta.dx) / fieldWidth;
            final newDy = (currentPosition.dy * fieldHeight + details.delta.dy) / fieldHeight;

 

현재 위치를 이동거리만큼 갱신되게 해서 문제를 해결했다.