ALIOTHX Developers
ALIOTHXMANAGER
  • 😈DEMO App 설치
  • 크로스플랫폼 개발환경
    • ⚙️Flutter 개발환경
    • 🧑‍💻Flutter 시작하기
    • 📲폰에서 실행
    • 개발가이드
    • 🚀솔루션 설치
    • 🚦코드가이드
      • 명명 규칙및 주석처리
      • 코딩 컨벤션
      • 디렉토리 생성및 관리
      • 페이지 작성
    • 🏭Flutter 아키텍쳐
      • 채널링
      • 웹뷰
        • 웹뷰 설정
        • 웹뷰 연동
      • 보안 (Security)
        • 대칭키 암호알고리즘
        • 비대칭키 암호알고리즘
        • 메시지 다이제스트
        • 탈옥및 루팅 탐지및 차단
        • 앱 위/변조 탐지및 차단
        • 코드 난독화
    • 🖥️관리시스템
    • 🎆협업도구
  • UIUX 컴포넌트
    • UI/UX
      • 테마 적용
      • 화면방향전환
      • 토스트 (Toast)
      • 버튼 (Button)
      • 텍스트 (Text)
      • 탭바 (TabBar)
      • 이미지뷰 (ImageView)
      • 카메라/이미지
      • 페이지 트랜지션
      • 입력필드 (TextField)
      • 체크박스 (CheckBox)
      • 라디오버튼 (RadioButton)
      • 로딩바 (Loading Indicator)
      • 바텀시트 (BottomSheet)
      • 리스트뷰 (ListView)
      • 슬리버 (Sliver)
      • 사운드 (Sound)
      • 애니메이션 (Animation)
      • 위치 및 정렬
      • 커스텀 키보드
      • 카드 (Card)
      • 토글 버튼 (Toggle Button)
      • 다이얼로그 (Dialog)
      • QR코드
      • 페이지뷰 (PageView)
  • Common 컴포넌트
    • 공통모듈
      • 데이터통신과 JSON 파싱
      • 인증 연동
      • 채널링
      • 네비게이션
      • 푸시 메시지
      • SMS 인증
      • 예외처리
  • Security 컴포넌트
    • 보안모듈
      • 메시지 다이제스트
      • 암/복호화
  • Option 컴포넌트
    • 옵션모듈
      • 동영상 플레이어
      • 유튜브 연동
      • 차트
      • SNS 공유
      • 지도
      • 로컬 DB
  • 🎁라이센스및 기술지원
  • 🏢고객사
Powered by GitBook
On this page
  • 커스텀
  • 페이드 인
  • 효과 미적용
  • 아래에서 위로 슬라이드
  • 왼쪽으로 슬라이드 with fade
  • 왼쪽으로 슬라이드
  • 오른쪽으로 슬라이드 with fade
  • 오른쪽으로 슬라이드
  • 위에서 아래로 슬라이드
  • 줌 인
  • 다른 탭 페이지로 이동
  1. UIUX 컴포넌트
  2. UI/UX

페이지 트랜지션

플러터(Flutter) 앱을 개발할 때 화면 전환은 중요한 부분 중 하나입니다. 사용자 경험을 향상시키고 앱의 내비게이션을 더 매끄럽게 만드는 데 도움이 됩니다. 아래에서 플러터에서 사용 가능한 페이지 트랜지션을 확인해보세요.

Previous카메라/이미지Next입력필드 (TextField)

Last updated 1 year ago

커스텀

context.router.navigate(CustomTransitionRoute());

앱에 고유한 전환 효과를 적용하려는 경우 사용되며, 애니메이션 및 페이지 이동 효과를 완전히 제어할 수 있습니다.

페이드 인

context.router.navigate(FadeInRoute());

새로운 페이지가 서서히 나타나는 효과를 제공하며, 페이지가 부드럽게 표시되는 것을 선호하는 경우에 적합합니다.

효과 미적용

context.router.navigate(NoTransitionRoute());

특별한 효과 없이 페이지를 빠르게 전환하는 데 사용됩니다. 페이지가 갑자기 교체되는 것을 원하는 경우에 유용합니다.

아래에서 위로 슬라이드

context.router.navigate(SlideBottomRoute());

새로운 페이지가 아래에서 위로 올라오는 효과를 제공합니다. 사용자에게 페이지가 위로 슬라이드 되는 느낌을 줍니다.

왼쪽으로 슬라이드 with fade

context.router.navigate(SlideLeftWithFadeRoute());

페이지가 왼쪽에서 오른쪽으로 슬라이드 되면서 동시에 페이드 아웃 효과가 적용됩니다.

왼쪽으로 슬라이드

context.router.navigate(SlideLeftRoute());

페이지가 왼쪽에서 오른쪽으로 슬라이드 되는 효과를 제공합니다.

오른쪽으로 슬라이드 with fade

context.router.navigate(SlideRightWithFadeRoute();

페이지가 오른쪽에서 왼쪽으로 슬라이드 되면서 동시에 페이드 아웃 효과가 적용됩니다.

오른쪽으로 슬라이드

context.router.navigate(SlideRightRoute());

페이지가 오른쪽에서 왼쪽으로 슬라이드 되는 효과를 제공합니다.

위에서 아래로 슬라이드

context.router.navigate(SlideTopRoute());

새로운 페이지가 위에서 아래로 슬라이드 되는 효과를 제공합니다.

줌 인

context.router.navigate(SlideTopRoute());

페이지가 서서히 확대되는 효과를 제공합니다. 페이지가 확대되는 것을 시각적으로 보여주며 사용자의 주의를 끕니다.

다른 탭 페이지로 이동

context.navigateTo(
                MainScreenRoute(
                  children: [
                    CommonTab(
                      children: [
                        CommonScreenRoute(),
                        NavigateRoute(),
                      ],
                    )
                  ],
                ),
              );

다른 탭 페이지로 이동하는 경우에 위와 같은 코드로, 탭 간 전환을 수행할 수 있습니다.

플러터는 다양한 페이지 트랜지션 옵션을 제공하여 앱의 내비게이션 및 화면 전환을 더욱 매끄럽게 만들 수 있습니다. 프로젝트의 요구 사항과 사용자 경험에 따라 적절한 트랜지션을 선택하여 앱 개발에 활용해보세요.

Page cover image