Flutter GestureDetector Swipe 구현하기

 

flutter에서는 제스처를 감지하기 위해 onPressed,   onTab을 직접 위젯에 넣는 대신에 GestureDetector 위젯을 이용해서 훨씬 더 많은 범위의 위젯을 감지할 수 있다. GestureDetector 는 플러터에서 지원하는 모든 제스처를 구현할 수 있는 위젯이라고 할 수 있다. 

 

자주 사용 하는 것들은 아래와 같다. 

• onTap : 한번 탭했을 때
• onDoubleTap : 연속으로 두번 탭했을 때
• onLongPress : 길게 누를 때
• onScale : 확대하기를 했을때
• onVerticalDragStart : 수직드래그가 시작됐을 때
• onVerticalDragEnd : 수직 드래그가 끝났을때
• onHorizontalDragStart : 수평 드래그가 시작됐을때
• onHorizontalDragEnd : 수평 드래그가 끝났을때
• onPanStart : 드래그가 시작됐을때
• onPanEnd : 드래그가 끝났을 때

하지만 이 외에도 진짜 많은 제스쳐를 지원함으로 들어가서 직접 보는 게 제일 좋다. 

 

내가 구현 하고자 한것은 보통 Tab을 웹에서도 마우스로 swipe 기능이 되었으면 하는 것이었다. 

그래서, onHorizontalDragStart 를 이용해서 구현 해 보았다. 각 페이지에 인덱스를 부여하고 해당 index를 기준으로 drag 제스쳐를 통해 왼쪽 오른쪽 이동 하는 듯이 보이게 구현을 해보았다. 

 // GestureDetector Swipe 구현 -> 근데 조금 버벅임을 포함한,,,
  return Container(
    height: heightValue,
    child: DefaultTabController(
      initialIndex: initialIndex,
      length: tabLength,
      child: Builder(
        builder: (BuildContext context) {
          int currentIndex = DefaultTabController.of(context)!.index;
          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: defaultTabUnSelectedColor,
                child: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator:
                      const BoxDecoration(color: defaultTabSelectedColor),
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.black,
                  tabs: tabWidgets,
                ),
              ),
              Expanded(
                child: Container(
                  color: defaultTabViewBackgroundColor,
                  child: GestureDetector(
                    onHorizontalDragEnd: (details) {
                      if (details.primaryVelocity! > 0) {
                        // 오른쪽으로 스와이프했을 때
                        var prevTabIndex = currentIndex - 1;
                        if (prevTabIndex < 0) {
                          prevTabIndex = tabLength - 1;
                        }
                        DefaultTabController.of(context)!
                            .animateTo(prevTabIndex);
                      } else if (details.primaryVelocity! < 0) {
                        // 왼쪽으로 스와이프했을 때
                        var nextTabIndex = currentIndex + 1;
                        if (nextTabIndex >= tabLength) {
                          nextTabIndex = 0;
                        }
                        DefaultTabController.of(context)!
                            .animateTo(nextTabIndex);
                      }
                    },
                    child: TabBarView(children: tabViewWidget),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    ),
  );