Flutter에서 화면 전환하기

보통 ‘화면(스크린)’ 또는 ‘페이지’ 등으로 불리는 전체 화면 UI에 해당하는 Flutter의 클래스는 Route입니다. Route에 포함되는 내용은 두 가지로서, 하나는 위젯으로 구현되는 페이지이고, 다른 하나는 그 페이지를 화면에 표시하는 전환(transition) 방식입니다.

 

Navigator

Navigator 클래스의 함수들은 입력받은 Route에 정의된 페이지를 거기에 함께 정의된 전환 방식을 통해 화면에 표시합니다. Navigator.push는 현재 페이지 위에 새 페이지를 덮어서 표시할 때 사용하는 함수입니다. 

Future<T?> push(BuildContext context, Route<T> route)

 

Navigator.pushReplacement는 현재 페이지를 새 페이지로 대체할 때 사용하는 함수입니다.

Future<T?> pushReplacement(BuildContext context, Route<T> route)

 

Navigator.pushNamed 또는 Navigator.pushReplacementNamed를 통해 Route 객체를 직접 전달하는 대신 미리 정의해 둔 Route의 이름을 사용할 수도 있습니다.

Future<T?> pushNamed(BuildContext context, String routeName)
Future<T?> pushReplacementNamed(BuildContext context, String routeName)

 

Navigator.pop은 전환된 페이지로부터 빠져나갈 때 사용하는 함수입니다.

void pop(BuildContext context)

 

 

Route

Route를 만드는 방법은 아래와 같이 세 가지가 있습니다.

CupertinoPageRoute(required Widget function(BuildContext) builder)

 

CupertinoPageRoute를 사용하면 iOS의 화면 전환 방식이 적용됩니다. 즉 페이지가 화면 오른쪽으로부터 가운데로 미끄러져 들어오게 됩니다.

MaterialPageRoute(required Widget function(BuildContext) builder)

 

MaterialPageRoute를 사용하면 플랫폼의 기본 전환 방식이 적용됩니다. Android에서는 화면 아래로부터 새 페이지가 미끄러져 들어오고, iOS에서는 CupertinoPageRoute 처럼 동작합니다.

PageRouteBuilder(
    required Widget function(BuildContext, Animation, Animation) pageBuilder,
    Widget function(BuildContext, Animation, Animation, Widget) transitionBuilder,
)

 

PageRouteBuilder를 사용하면 Route를 원하는 대로 만들 수 있습니다. Route를 만들기 위해 구현해야 하는 것은 pageBuilder와 transitionBuilder입니다. 

 

pageBuilder를 통해 전환할 새 페이지의 위젯을 반환합니다. 전달되는 첫 번째 Animation을 사용해서 새 페이지에 애니메이션을 포함할 수도 있습니다. 두 번째 Animation은 전환하기 전에 있었던 페이지를 위한 것인데 정확한 사용법은 분명하지 않습니다. 

 

transitionBuilder는 화면에 새 페이지를 보여주는 동안의 전환 방법을 정의하는 데 사용됩니다. 전달되는 첫 번째 Animation을 사용해서 새 페이지의 전환 과정에 애니메이션을 추가할 수 있습니다. 두 번째 Animation은 전환하기 전에 있었던 페이지를 위한 것인데 정확한 사용법은 분명하지 않습니다. transitionBuilder를 입력하지 않거나 애니메이션을 구현하지 않는다면 새 페이지는 전환 과정 없이 화면에 즉시 표시됩니다.

 

다음은 위에서 설명한 내용을 구현한 소스코드입니다.