inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

탭 할때마다 컨트롤 보여주고 감추기

GestureDetector onTap이 올바르게 동작하지 않습니다.

238

인프런 수강

작성한 질문수 3

0

안녕하세요.

좋은 강의 잘 듣고 있습니다.

 

VideoPlayer을 포함한 위젯을 VideoPlayerWidget으로 Stateful 위젯으로 구현했습니다.

그리고 자식 위젯으로 아래 코드와 같이 GestureDetector > ApstectRatio > Stack 으로 구성하였습니다.

Stack의 자식 위젯으로는 VideoPlayer, _PlayButtons, _Bottom 위젯을 가지고 있습니다.

 

이 때, VideoPlayer가 포함되어 있으면 GestureDetector의 onTap 메서드가 호출되지 않으며, VideoPlayer를 제외하는 경우 onTap 메서드가 호출되고 있습니다.

 

관련해서 자식의 터치 이벤트도 감지하기 위해 GestureDetector에 behavior 프로퍼티로 HitTestBehavior.opaque 값을 할당했지만, 그래도 VideoPlayer가 존재하는 경우 올바르게 동작하지 않고 있습니다.

 

혹시 어떤 부분이 문제인지 알 수 있을까요...?

감사합니다.

 

아래 코드는 VideoPlayerWidget의 build 메서드입니다.

@override
Widget build(BuildContext context) {
  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: (){
      print("onTap");
    },
    child: !isInitalized
        ? const CircularProgressIndicator()
        : AspectRatio(
            aspectRatio: videoPlayerController.value.aspectRatio,
            child: Stack(
                children: [
              VideoPlayer(videoPlayerController),
             _PlayButtons(
                onLeft: onLeft,
                onPlay: onPlay,
                onRight: onRight,
                isPlaying: videoPlayerController.value.isPlaying,
              ),
                _Bottom(
                posMinutes: videoPlayerController.value.position.inMinutes,
                posSeconds: videoPlayerController.value.position.inSeconds,
                durationMinuets:
                    videoPlayerController.value.duration.inMinutes,
                durationSeconds:
                    videoPlayerController.value.duration.inSeconds,
                onSliderChanged: onSliderChanged,
              ),
              // _PickPicture(onPress: widget.onPickPicture,)
            ])),
  );
}

flutter 클론코딩

답변 2

0

코드팩토리

안녕하세요!

혹시 특정 위젯이 터치를 가리는 현상은 아닐까요?

예를들어서 제일 위에있는 위젯이 아래 위젯을 감싸는데 터치는 아래 위젯에서 감지해야하는 경우입니다.

혹시 강의 코드랑 완전 같은데 아예 눌리지 않는걸까요? 이 경우 다시 말씀주세요! 아닌경우 위에 말씀드린 상황 확인 해보시면 좋을 것 같습니다. 보통 Stack에서 특정 위젯 빼고 실행해야 눌리는 경우 이 경우가 많습니다.

감사합니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 인프런 수강님.

GestureDetector의 onTap 함수가 VideoPlayer가 포함된 경우 정상적으로 동작하지 않는 문제에 대해 문의주셨군요. 이 경우, Flutter에서 자식 위젯이 터치 이벤트를 가로챌 수 있기 때문에 발생하는 문제일 수 있습니다.

관련된 질문과 유사한 해결 방법이 아래 링크에 있습니다:

이 두 게시물에서는 Stack 위젯과 GestureDetector의 동작에 관련된 문제가 다뤄집니다. 특히, 위젯의 터치 이벤트가 자식 위젯에서 제대로 전달되지 않는 경우 해결 방법이 포함되어 있습니다.

간단히 정리하면, Stack 안의 VideoPlayer가 터치 이벤트를 가로채고 있어 GestureDetector의 onTap이 호출되지 않는 것입니다. 이를 해결하기 위해 VideoPlayer 위젯에도 GestureDetector를 추가하여 터치 이벤트를 처리할 수 있도록 개선해야 합니다.

예제 코드로 터치 이벤트를 처리할 수 있는 방법을 아래와 같이 시도해 볼 수 있습니다:

@override
Widget build(BuildContext context) {
  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: (){
      print("onTap");
    },
    child: !isInitalized
        ? const CircularProgressIndicator()
        : AspectRatio(
            aspectRatio: videoPlayerController.value.aspectRatio,
            child: Stack(
                children: [
              GestureDetector(
                onTap: () {
                  // VideoPlayer를 터치했을 때의 로직을 여기에 추가
                  print("VideoPlayer tapped");
                },
                child: VideoPlayer(videoPlayerController),
              ),
             _PlayButtons(
                onLeft: onLeft,
                onPlay: onPlay,
                onRight: onRight,
                isPlaying: videoPlayerController.value.isPlaying,
              ),
                _Bottom(
                posMinutes: videoPlayerController.value.position.inMinutes,
                posSeconds: videoPlayerController.value.position.inSeconds,
                durationMinuets:
                    videoPlayerController.value.duration.inMinutes,
                durationSeconds:
                    videoPlayerController.value.duration.inSeconds,
                onSliderChanged: onSliderChanged,
              ),
              // _PickPicture(onPress: widget.onPickPicture,)
            ])),
  );
}

이 방법을 통해 자식 위젯인 VideoPlayer에서 터치 이벤트를 처리하면서도 부모 GestureDetector의 onTap 이벤트도 동작할 수 있도록 개선할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

198강 (){onTap(e);}의 이해 돕기

0

27

1

video_call 플러그인 설치후 에러 발생

0

45

1

SDK 안드로이드 설치 질문!

0

60

1

코드팩토리 디스코드 링크 다시 부탁드려요~

0

92

1

Webview를 이용해서 URL 상의 페이지 출력 불가

0

70

1

홈스크린 함수를 함축해서 main.dart에 옮기는 문제

0

55

1

플레이스토어

0

59

1

아고라 엔진 init 함수의 반환타입이 Future<void> 이것의 의미는 무엇인가요?

0

55

1

가이드라인 질문

0

57

0

emulator 에러 환경설정 뭐가 문제 일까요??

0

76

1

emulator 실행 오류

0

93

3

Column을 가로방향 최대 사이즈를 차지하도록 하는 방법에 관련

0

71

1

pubspec.yaml에서 font를 추가하면서 weight 값을 지정하는 것이 의미가 있는 것인지 문의

0

43

1

setState()를 호출하지 않으면 build가 실행 안되는 건가요?

0

53

1

video_call 플러그인 설치시 에러문제

0

64

1

children 안의 if 문에서 { } 못쓰는 이유?

0

48

1

이렇게 오류가 떠요

0

64

1

AppBar 사용했는데

0

61

2

[문제해결] '오늘도 출첵!' 의 171번 강의에서 중요한 문제를 발견했습니다

0

56

1

StatefulWidget 실습 에러가 발생합니다.[해결완료]

0

63

1

Video Player 프로젝트에 대한 추가 질문

0

53

0

Row위젯이나 column위젯의 위치는 누가 정하나요??

0

42

1

geolocator 오류때문에 개발진행이 불가능입니다

0

63

1

API 관련 이슈

0

86

2