Flutter_12. Package, Gesture, List, Image, Swipe, Button

지난 번 별도 파일로 body를 분리하였다. 이어서 홈화면을 만들어 보겠다.

파일은 img_swipe.dart 에 이어서 작업 할 예정이다.

 

2023.05.05 - [개발하기] - Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful

Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful

 

 

 

 

Packages, Gesture

 

1) pub.dev 에서 gesture 검색

https://pub.dev/packages/simple_gesture_detector

simple_gesture_detector | Flutter Package

 

2) 복사

 

3) pubspec.yaml 파일에 넣고 저장

 

 

 

 

 

 

Image, List, SimpleGestureDetector, Swipe

 

 

1)  리스트 만들기

 

 

2) body에 사용하고 출력 확인

 

 

3) SimpleGestureDetector로 Wrap

- Center 클릭하고 전구(💡) 클릭
- Wrap with Widget 선택하고, "SimpleGestureDetector"로 이름 변경
- SimpleGestureDetector에 빨간 줄 뜨면, 전구(💡) 클릭하여 Import Library

 

 

4) onHorizontalSwipe:, onVerticalSwipe: 에 함수 사용

 

 

 

5) 좌우 스와이프 함수 만들기 : _onHorizontalSwipe(SwipeDirection direction)

  // --- 좌우 스와이프 Func
  _onHorizontalSwipe(SwipeDirection direction){
    if(direction == SwipeDirection.left){
      setState(() {
        currentImage+=1;
        if(currentImage >= imageName.length){
          currentImage = 0;
        }
      });
    }else{
      setState(() {
        currentImage-=1;
        if(currentImage < 0){
          currentImage = imageName.length - 1;
        }
      });
    }
  }

 

 

 

6) 위아래 스와이프 함수 만들기 : _onVerticalSwipe(SwipeDirection direction)

  // --- 위아래 스와이프 Func
  _onVerticalSwipe(SwipeDirection direction){
    if(direction == SwipeDirection.up){
      setState(() {
        currentImage+=1;
        if(currentImage >= imageName.length){
          currentImage = 0;
        }
      });
    }else{
      setState(() {
        currentImage-=1;
        if(currentImage < 0){
          currentImage = imageName.length - 1;
        }
      });
    }
  }

 

 

 

 

7) 저장하고 화면 확인해보니, 좀 이상해서 padding과 SizedBox로 이미지 담기 추가 진행!

 

 

 

8) 저장하고 화면 확인 및 이미지 스와이프 테스트

 

 

 

 

 

 

 

Image, List, SimpleGestureDetector, Button

 

 

 

 

1) 버튼에 setState로 이벤트 : 버튼 [이전으로] 클릭 시 현재 이미지에서 -1

 

 

2) 버튼에 setState로 이벤트 : 버튼 [다음으로] 클릭 시 현재 이미지에서 +1

 

 

 

3) 저장하고 화면 확인 및 버튼 클릭 시 이미지 변경 확인 

 

 

 

반응형