플루터 공식문서에 있는 Navigator 사용법을 정리해 보았다. Navigator는 플루터의 페이지 이동에 사용된다.
네비게이터 클래스
최근에 방문한 페이지와 함께 이전 페이지 위에 시각적으로 오버레이를 사용하여 위젯 계층 구조 맨 위에 네비게이터가 있음. 이 패턴을 사용하면 네비게이터가 오버레이에서 위젯을 움직여 한 페이지에서 다른 페이지로 전환해서 표시할 수 있음.
네비게이터 사용 모바일 앱은 일반적으로 ‘화면’또는 ‘페이지’라는 전체 화면 요소를 통해 콘텐츠를 표시함. Flutter에서는 이러한 요소를 경로라고하며 네비게이터 위젯으로 관리합니다 . 네비게이터는 Route 객체의 스택을 관리하고 Navigator.push 및 Navigator.pop 과 같은 스택 관리 방법을 제공함.
Android와 같은 특정 플랫폼에서 시스템 UI는 사용자가 애플리케이션 스택에서 이전 경로로 다시 이동할 수있는 뒤로 버튼 제공함. 이러한 뒤로 버튼이 자동 생성되지 않는 경우에는 Scaffold.appBar 속성에 사용되는 AppBar를 사용하여 뒤로 버튼을 자동으로 추가할 수 있음.
전체 화면 경로 표시 네비게이터를 직접 만들 수 있지만 WidgetsApp 또는 MaterialApp 위젯으로 만든 네비게이터를 사용하는 것이 가장 일반적임. Navigator.of 로 해당 네비게이터를 참조가능함.
MaterialApp을 사용하는 것이 가장 간단함. home: 다음에는 하단의 경로를 표시함.
void main() {
runApp(MaterialApp(home: MyAppHome()));
}스택에서 새 경로를 푸시하기 위해 화면에 표시할 항목을 생성하는 빌더 기능을 사용하여 MaterialPageRoute 인스턴스를 만들 수 있음.
예시
Navigator.push(context, MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('My Page')),
body: Center(
child: FlatButton(
child: Text('POP'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
},
));라우트는 하위 위젯 대신 빌더 함수로 위젯을 정의함. 네비게이터의 pop 메소드를 사용하여 앱의 홈 페이지를 표시하는 새로운 경로를 팝업 할 수 있음.
Navigator.pop(context);스캐폴드는 자동으로 앱바에 ‘뒤로’ 버튼을 추가하기 때문에 스캐 폴드가 있는 경로에서 네비게이터를 팝업시키는 위젯을 제공할 필요는 없음. 뒤로 버튼을 누르면 Navigator.pop 이 호출됨. Android에서는 시스템 뒤로 버튼을 눌러도 동일한 작업을 수행함.
네비게이터 경로 사용 경로 이름은 경로와 유사한 구조를 사용함. (예 : ‘/ a / b / c’). 앱의 경로 이름은 기본적으로 ‘/’임.
MaterialApp에서 <String, WidgetBuilder>을 route 이름과 관련하여 사용함.
void main() {
runApp(MaterialApp(
home: MyAppHome(), // route 이름은 '/'로 표시함
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => MyPage(title: 'page A'),
'/b': (BuildContext context) => MyPage(title: 'page B'),
'/c': (BuildContext context) => MyPage(title: 'page C'),
},
));
}이름으로 경로를 표시하려면
Navigator.pushNamed(context, '/b');경로는 값을 반환 할 수 있음. 경로를 푸시하여 사용자에게 값을 요청하면 pop 메소드의 결과 매개 변수를 통해 값을 리턴할 수 있음. 경로를 푸시하는 메소드는 Future를 리턴함. Future 값은 pop 메소드의 result 매개 변수임.
예를 들어 사용자에게 ‘확인’을 눌러 작업을 확인하도록 요청하려면 Navigator.pushawait 의 결과를 얻을 수 있음.
bool value = await Navigator.push(context, MaterialPageRoute<bool>(
builder: (BuildContext context) {
return Center(
child: GestureDetector(
child: Text('OK'),
onTap: () { Navigator.pop(context, true); }
),
);
}
));사용자가 ‘OK’를 누르면 값이 true가 됨. 경로를 사용하여 값을 반환하는 경우 경로의 유형 매개 변수는 pop 의 결과 유형과 일치해야 함.
팝업 경로 경로가 전체 화면을 가리지 않아도 됨. PopupRoute 는 현재 화면이 보이도록 부분적으로만 불투명한 ModalRoute.barrierColor로 화면을 덮음.
PopupMenuButton 및 DropdownButton은 팝업 경로를 생성하는 위젯임. 이 위젯은 PopupRoute의 내부 서브 클래스를 작성하고 Navigator의 push 및 pop 메소드를 사용하여 이를 표시함.
맞춤 경로 PopupRoute , ModalRoute 또는 PageRoute와 같이 라우트 클래스 중 하나의 자체 서브 클래스를 작성하여 라우트, 색상 및 동작 및 애니메이션 전환을 제어 할 수 있음.
PageRouteBuilder의 클래스는 사용자 지정 경로를 정의 할 수 있음.
예제
Navigator.push(context, PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return Center(child: Text('My PageRoute'));
},
transitionsBuilder: (___, Animation<double> animation, ____, Widget child) {
return FadeTransition(
opacity: animation,
child: RotationTransition(
turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
child: child,
),
);
}
));