[Flutter] Navigator로 페이지 이동 구현하기, MaterialPageRoute 사용법

Navigator

특징

• 페이지 이동 시 새로운 페이지가 기존 페이지를 대체하는 웹사이트와 달리 모바일앱에서는 새로운 페이지가 기존 페이지 위에 덮이는 구조
• 탭과 달리 Stack으로 페이지가 관리되므로 뒤로가기 시 페이지가 걷히는 식

사용법

React의 useRouter랑 비슷하게 .push를 사용한다.

IconButton(
  onPressed: () {Navigator.push(context, route)},
  icon: Icon(Icons.add_box_outlined, size: 35),
),

• 이 때 context에는 MaterialApp 정보가 포함되어야 함
• 두 번째 파라미터는 route인데 아래와 같이 작성가능
• return 뒤, 그러니까 Text('New Page') 부분이 새로운 페이지로 뜨는거
• 길어지면 커스텀 위젯으로 빼는 게 방법 ~

MaterialPageRoute(
  builder: (c) {
    return Text('New Page');
  },
),

자란

닫기 버튼

새로 열린 페이지를 닫고 싶을 수 있으니 버튼 하나 만들어보자

IconButton(
  onPressed: () {
    Navigator.pop(context);
  },
  icon: Icon(Icons.close),
),

이 때 Navigator.pop에 들어가는 context는
Navigator.push와 마찬가지로 MaterialApp 정보를 포함해야 함

(참고) return 생략하기

위의 MaterialPageRoute의 builder에서와 같이 함수 안에 return문 하나밖에 없다면 아래와 같이 화살표 함수로 더 간단히 작성할 수 있다.

MaterialPageRoute(builder: (c) => Text('New Page')),

Arrow Function 인 잉글리시