새 화면으로 이동하고 뒤로 돌아오기
많은 앱들은 화면마다 표시되는 정보가 다르기 때문에 몇개의 화면을 가집니다. 예를 들어, 어떤앱이 제품의 목록을 보여주는 화면을가지고 있다가 사용자가 제품 이미지를 탭했을 때 제품의 상세정보화면으로 이동할 수 있습니다.
플러터에서는 스크린이나 페이지를 라우트라고 부릅니다. 안드로이드에서는 액티비티, IOS에서는 뷰컨트롤러와 같은 겁니다. 플러터에서 라우트는 위젯입니다.
네비게이터를 사용해서 어떻게 새로운 라우트로 이동하는지 보겠습니다.
디렉션
다음과 같은 단계를 거치면서 두 라우트 사이에 어떻게 이동하는 지 알아 봅니다.
1. 두 라우트 만들기
2. Navigator.push()로 두번째 라우트로 이동하기
3. Navigator.pop()으로 첫번째 라우트로 돌아오기
1. 두 라우트 만들기
화면이동 시 사용될 두 화면(라우트)를 만들겠습니다. 기본적인 예제이기 때문에 각 라우트는 버튼 하나씩만을 가지도록 하겠습니다. 첫번째 라우트에 버튼을 탭하면 두 번째 라우트로 이동하고 두 번재 라우트의 버튼을 탭하면 첫번째라우트로 이동 하게 됩니다.
먼저 화면(라우트)을 만들어 보겠습니다.
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Route"),
),
body: Center(
child: RaisedButton(
child: Text("Open Route"),
onPressed: () {},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second route"),
),
body: Center(
child: RaisedButton(
child: Text("Go back"),
onPressed: () {},
),
),
);
}
}
2. Navigator.push()를 사용하여 SecondRoute로 이동하기
새로운 라우트로 이동하기 위해서는 Navigator.push() 메소드를 사용합니다.
@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
push()메소드는 Navigator가 관리하는 스택에 라우트를 추가합니다.
Route 객체는 어디서 가져올까요? 여러분이 만들 거나, MaterialPageRoute를 사용할 수 있습니다. MaterialPageRoute는 플랫폼 별 애니메이션을 사용하여 새로운 라우트로 이동하기 때문에 편리합니다.
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
3. Navigation.pop()을 사용하여 첫번째 페이지로 이동하기
SecondRoute를 닫고 첫번째 페이지로 이동하려면 Navigator.pup()을 사용하면됩니다.
pop()메소드는 현재 라우트를 라우트 스택에서 제거합니다.
onPressed: () {
Navigator.pop(context);
},
[전체 소스]
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FirstRoute(),
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Route"),
),
body: Center(
child: RaisedButton(
child: Text("Open Route"),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second route"),
),
body: Center(
child: RaisedButton(
child: Text("Go back"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}