Voyage_dev
항해하는 개발자
Voyage_dev
전체 방문자
오늘
어제
  • All (158)
    • Front-End (102)
      • HTML & CSS (7)
      • JavaScript (13)
      • Web & 표준 & ETC (15)
      • React (17)
      • Next (13)
      • TypeScript (6)
      • Zustand (1)
      • AWS (4)
      • Redux (1)
      • MobX (9)
      • GraphQL (1)
      • Flutter (15)
    • 알고리즘 (12)
      • Java (11)
      • JavaScript (1)
    • Git (1)
    • Project (2)
      • 개인 (1)
      • 팀 (1)
    • Books (30)
      • 누구나 자료구조와 알고리즘 (20)
      • Do It 타입스크립트 프로그래밍 (9)
    • 자료구조 (6)
    • 취업 (1)
    • 항해플러스 (1)
      • 1주 (1)

블로그 메뉴

  • 👨🏻‍💻 Github
  • 💻 Rss 블로그
  • 🏊‍♂️ Resume
  • 🗂️ Portfolio

인기 글

최근 댓글

hELLO · Designed By 정상우.
Voyage_dev

항해하는 개발자

Front-End/Flutter

[Flutter] GestureDetector

2023. 10. 28. 17:34

GestureDetector

  • 유저가 위젯을 어떻게 만지는지 감지할 수 있다
  • onTap: (){ 한 번 누를시 실행할 코드 }
  • onDoubleTap: (){ 더블탭시 실행할 코드 }
  • onLongPress: (){ 길게누를시 실행할 코드 }
  • onScaleStart: (){ 줌인시 실행할 코드 }
  • onHorizontalDragStart: (){ 수평으로 드래그시 실행할 코드 }
  • 등등
Navigator.push(context,
  PageRouteBuilder(
    pageBuilder: (c, a1, a2) => Upload(),
    transitionsBuilder: (c, a1, a2, child) => FadeTransition(opacity: a1, child: child),
    transitionDuration: Duration(milliseconds : 500),
  ),
)
  • pageBuilder: 에는 보여줄 페이지를 return하면 되고
  • transitionsBuilder: 는 파라미터 4개를 입력하고 애니메이션을 return 하면 된다
    • 첫째는 context (쓸데없음)
    • 둘째는 0에서 1로 증가하는 애니메이션 숫자 (새로운 페이지에 씀)
    • 셋째는 0에서 1로 증가하는 애니메이션 숫자 (기존에 보이던 페이지에 씀)
    • 넷째는 현재 보여주는 위젯

FadeTransition()

  • opacity: 애니메이션 숫자
  • child: 보여줄 위젯
  • 이렇게 작성하면 특정 위젯을 서서히 opacity를 0에서 1로 보여줄 수 있다.
  • transitionDuration : Duration(milliseconds : 500) 이걸로 몇초간 동작할지 설정가능.
  • PageRouteBuilder() 에 넣을 수 있다.

SlideTransition()

SlideTransition(
  position: Tween(
    begin: Offset(-1.0, 0.0),
    end: Offset(0.0, 0.0),
  ).animate(a1),
  child: child,  
)

더불어

위젯 위치 변경하려면 PositionedTransition()

위젯 사이즈를 변경하려면 ScaleTransition()

위젯을 가렸다가 보여주려면 SizeTransition()

위젯을 회전시키려면 RotationTransition()

 

출처 : 코딩애플

'Front-End > Flutter' 카테고리의 다른 글

[Flutter] Provider  (1) 2023.10.28
[Flutter] Shared preferences  (0) 2023.10.28
[Flutter] 내장 Image file  (0) 2023.10.28
[Flutter] Navigator  (0) 2023.10.28
[Flutter] DIO 사용 방법  (0) 2023.10.28
    'Front-End/Flutter' 카테고리의 다른 글
    • [Flutter] Provider
    • [Flutter] Shared preferences
    • [Flutter] 내장 Image file
    • [Flutter] Navigator
    Voyage_dev
    Voyage_dev

    티스토리툴바