[Flutter] 👆GestureDetector와 콜백 함수

Flutter 앱에서 터치 이벤트를 처리할 때, GestureDetector와 콜백 함수의 사용을 조심해야 한다. 특히 함수에 인자가 있는 경우 올바르게 콜백을 설정하지 않으면 위와 같은 에러를 마주치게 된다.

---

1. 콜백 함수의 개념

콜백 함수란?

콜백 함수는 특정 이벤트가 발생했을 때 실행되도록 설정된 함수로, Flutter에서 콜백은 주로 사용자가 버튼을 클릭하거나 화면을 터치할 때 호출된다. 이러한 콜백 함수는 이벤트가 발생할 때까지 실행되지 않으며, 이벤트가 발생했을 때만 호출되도록 설정된다.

GestureDetector(
  onTap: () {
    print("Button tapped!");
  },
  child: Text("Tap me"),
),

위 코드에서 onTap은 사용자가 해당 텍스트를 클릭했을 때만 실행되는 콜백 함수다.

---

2. 문제의 원인

즉시 실행과 콜백 전달의 차이

내가 마주친 문제는 아래 예시 코드에서 보이듯, 함수 호출을 즉시 실행하게 되어 발생했다. 정확히는 flutter에서 화면을 build 하는 중에 상태가 변경되어 build 가 여러번 발생하는 문제가 발생한 것이다.

GestureDetector(
  onTap: onLoginTap(context),  // 잘못된 사용
  child: Text("Login"),
),

위의 코드에서는 onLoginTap(context)가 즉시 호출되고, 그 결과값이 onTap에 전달된다. 이는 사용자가 버튼을 탭하기도 전에 함수가 실행되는 동작을 유발할 수 있다.

---

3. 해결 방법

올바른 콜백 전달 방식

함수 호출을 콜백으로 전달하려면, 람다 표현식이나 익명 함수를 사용해야 한다. 이렇게 하면 함수가 정의된 시점에서는 실행되지 않고, 사용자가 실제로 탭할 때만 호출된다.

GestureDetector(
  onTap: () => onLoginTap(context),  // 올바른 사용
  child: Text("Login"),
),

또는 익명 함수를 사용하여 다음과 같이 작성할 수도 있다:

GestureDetector(
  onTap: () {
    onLoginTap(context);  // 익명 함수 사용
  },
  child: Text("Login"),
),

이 방식은 onTap 이벤트가 발생할 때까지 onLoginTap(context)가 호출되지 않는다.

---

4. 인자가 없는 함수의 경우

인자가 없는 함수 콜백 처리

만약 함수에 인자가 없다면, 함수 이름만으로 콜백을 전달할 수 있다 . 나는 이 부분에 대해 인지하고 있지 않아서 인자가 있는 함수를 전달할 때도 콜백 함수나 익명 함수를 사용하지 않았다.

void onLoginTap() {
  print('Login button tapped!');
}

GestureDetector(
  onTap: onLoginTap,  // 인자가 없는 경우
  child: Text("Login"),
),

이 경우에는 함수 이름만 전달하면 되기 때문에 ()가 필요 없다. Flutter는 이벤트가 발생할 때 해당 함수가 호출되도록 자동으로 처리한다.

---

요약

• 콜백 함수는 이벤트가 발생할 때 실행되도록 설정된 함수.
• GestureDetector에서 콜백 함수 전달 시, 람다 표현식이나 익명 함수를 사용해야 함수가 즉시 실행되는 것을 방지할 수 있다.
• 인자가 없는 함수는 함수 이름만으로 콜백을 전달할 수 있다.