[flutter] 플러터 Wrap을 통해 터치 제스처 인식 기능을 구현하는 방법

07 Dec 2023

flutter

플러터에서 공간에 맞춰 동적으로 위젯을 배치하고 싶다면 Wrap 위젯을 사용할 수 있습니다. 이것은 여러 위젯을 감싸고 필요한 경우 행이나 열로 자동으로 줄바꿈하는 데 도움이 됩니다. 이번 포스트에서는 Wrap 위젯을 사용하여 터치 제스처 인식 기능을 구현하는 방법을 알아보겠습니다.

1. GestureDetector를 사용하여 터치 제스처 처리하기

터치 제스처 인식을 위해 Wrap 위젯 내부에 각 위젯에 대한 GestureDetector를 추가해야 합니다. GestureDetector는 터치 제스처 이벤트를 감지하여 적절한 처리를 할 수 있도록 도와줍니다. 예를 들면, 터치를 감지하여 해당 위젯을 확대하거나 다른 동작을 수행할 수 있습니다.

다음은 간단한 예시 코드입니다.

Wrap(
  children: [
    GestureDetector(
      onTap: () {
        // 터치 제스처 처리
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
    GestureDetector(
      onTap: () {
        // 터치 제스처 처리
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    // 추가적인 위젯
  ],
)

위 코드에서는 Wrap 내부에 두 개의 GestureDetector를 사용하여 두 개의 Container 위젯을 감싸고 있습니다. 각 GestureDetector는 위젯의 onTap 콜백을 사용하여 터치 제스처를 처리할 수 있습니다.

2. 터치 제스처 처리 구현하기

각 GestureDetector의 onTap 콜백에서 원하는 터치 제스처 처리를 구현할 수 있습니다. 예를 들어, 특정 위젯을 확대하거나 다른 화면으로 전환하는 등의 동작을 수행할 수 있습니다.

다음은 예시 코드입니다.

GestureDetector(
  onTap: () {
    setState(() {
      isExpanded = !isExpanded;
    });
  },
  child: Container(
    width: isExpanded ? 200 : 100,
    height: isExpanded ? 200 : 100,
    color: Colors.blue,
  ),
)

위 코드에서는 onTap 콜백에서 isExpanded라는 상태 변수를 토글하여 Container의 크기를 변경합니다. 사용자가 터치할 때마다 Container의 크기가 변경되므로 확대/축소 효과를 구현할 수 있습니다.

3. 참고 자료

이 포스트에서는 Wrap을 사용하여 터치 제스처 인식 기능을 구현하는 방법을 알아보았습니다. GestureDetector를 이용하여 터치 제스처를 감지하고 적절히 처리할 수 있습니다. 이를 응용하여 다양한 터치 제스처 기능을 구현해 보세요!