Navigator.push로 페이지 전환
Flutter에서는 페이지 간의 화면 전환을 구현할 때 Navigator.push 메서드를 사용한다.
이 메서드는 새로운 페이지로 이동하는 데 필요한 기본 메커니즘을 제공하며, 이를 통해 PageRouteBuilder와 MaterialPageRoute를 사용하여 다양한 전환 효과를 적용할 수 있다.
이번 글에서는 Navigator.push와 함께 사용하는 PageRouteBuilder와 MaterialPageRoute의 기능과 차이점을 설명하겠다.
Navigator.push란?
Navigator.push는 현재 페이지 위에 새로운 페이지를 스택에 추가하는 역할을 한다.
Flutter는 이 스택 구조를 이용해 페이지 전환을 관리하며, 사용자가 뒤로가기 버튼을 누르면 스택에서 페이지를 꺼내 현재 페이지를 다시 표시한다.
기본 사용법
Navigator.push 메서드는 두 가지 인자를 사용한다:
context: 현재 위젯 트리의 위치를 나타내는 빌더 컨텍스트이다.route: 새로운 페이지 전환을 정의하는Route객체이다. 이 객체에는 페이지 전환 애니메이션과 동작을 정의할 수 있다.
예제 코드
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);위 코드에서 NewScreen은 사용자가 이동할 새로운 화면이며, MaterialPageRoute는 전환 애니메이션을 정의하는 Route 객체이다.
MaterialPageRoute란?
MaterialPageRoute는 Material Design 스타일의 기본 페이지 전환 애니메이션을 제공한다. Android와 iOS의 기본적인 페이지 전환 방식과 유사하게, 화면이 슬라이드하며 전환되는 효과를 보여준다.
주요 기능과 사용 가능한 인자들
builder: 새로운 화면을 빌드하는데 사용되는 콜백 함수이다.settings: 페이지 전환에 대한 추가 설정을 위한 인자이다.fullscreenDialog:true로 설정 시, 페이지가 대화 상자처럼 전체 화면에 표시된다.maintainState: 기본값은true이며,false로 설정하면 백그라운드 상태에서도 페이지 상태를 유지하지 않는다.
예제 코드
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewScreen(),
fullscreenDialog: true,
),
);PageRouteBuilder란?
PageRouteBuilder는 MaterialPageRoute보다 더 유연한 전환 애니메이션을 제공하는 클래스로, 화면 전환 애니메이션을 세밀하게 제어할 수 있다.
주요 기능과 사용 가능한 인자들
pageBuilder: 새로운 화면을 빌드하는 콜백 함수이다.transitionsBuilder: 사용자 정의 애니메이션을 구현하는 콜백 함수이다.transitionDuration: 전환 애니메이션에 걸리는 시간을 설정한다.opaque와barrierDismissible: 전환 화면의 투명도와 뒤로 가기 동작을 설정할 수 있다.
예제 코드
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewScreen(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
var begin = Offset(1.0, 0.0);
var end = Offset.zero;
var curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
var offsetAnimation = animation.drive(tween);
return SlideTransition(
position: offsetAnimation,
child: child,
);
},
),
);PageRouteBuilder와 MaterialPageRoute의 차이점
두 클래스의 가장 큰 차이점은 애니메이션의 커스터마이징 가능성이다.
MaterialPageRoute는 기본적인 전환 애니메이션을 제공하는 반면, PageRouteBuilder는 개발자가 직접 애니메이션을 정의할 수 있는 자유를 제공한다.
| 특징 | MaterialPageRoute | PageRouteBuilder |
|---|---|---|
| 애니메이션 커스터마이징 | 기본 애니메이션 제공, 커스터마이징 불가 | 커스텀 애니메이션을 완전히 제어 가능 |
| 사용 편의성 | 설정이 간단하며 사용하기 쉬움 | 설정이 복잡하지만 높은 유연성을 제공 |
| 전환 효과 | 기본적으로 슬라이드 효과 사용 | 개발자가 정의한 모든 전환 효과 지원 |
| transitionDuration | 설정 불가 (기본값) | 개발자가 전환 시간을 자유롭게 설정 가능 |
Navigator.push와 함께 사용할 때의 차이점
Navigator.push와MaterialPageRoute를 함께 사용할 경우, 간단한 네비게이션과 기본 애니메이션이 필요할 때 적합하다.Navigator.push와PageRouteBuilder는 복잡한 애니메이션이나 사용자 정의 애니메이션이 필요할 때 더 유리하다.
어떤 경우에 사용해야 할까?
- MaterialPageRoute는 간단하고 직관적인 페이지 전환이 필요한 경우에 사용한다. 기본적으로 제공되는 전환 효과가 대부분의 경우 충분하기 때문이다.
- PageRouteBuilder는 커스텀 애니메이션을 구현하거나, 애플리케이션에 독특한 전환 효과를 추가하고 싶을 때 사용하는 것이 좋다.
결론
Navigator.push는 Flutter의 기본 네비게이션 방법으로, 페이지 전환을 관리하는 데 필수적이다.
이와 함께 사용할 수 있는 MaterialPageRoute와 PageRouteBuilder는 각각 사용자가 필요로 하는 전환 효과와 애니메이션에 따라 선택할 수 있다.
MaterialPageRoute는 간단하고 사용하기 쉬운 기본 전환 효과를 제공하며, 대부분의 경우 빠르게 적용할 수 있다.PageRouteBuilder는 더 복잡하고 세밀한 애니메이션 제어가 가능해, 고급 사용자와 맞춤형 애니메이션 효과가 필요한 경우에 적합하다.
애플리케이션의 요구 사항에 따라 적절한 페이지 전환 클래스를 선택하는 것이 보다 나은 사용자 경험을 제공하는 데 도움이 된다.
