페이지 이동하기

Flutter에서 페이지 이동을 구현하는 데 사용되는 두 가지 메서드인 Navigator.pushNamed()와 Navigator.push()에 대해 설명하겠습니다.

1. Navigator.pushNamed():

Navigator.pushNamed() 메서드를 사용할 때, 라우트의 이름을 지정하여 페이지 이동을 수행합니다. 이 방법은 프로젝트에서 라우트 이름을 사용하여 구성 요소들을 쉽게 기억하고 관리할 수 있으며, 'MaterialApp'에 라우트를 등록해야 합니다.

main.dart 파일에서 'MaterialApp'의 'routes' 속성을 다음과 같이 설정합니다.

MaterialApp(
  ...
  initialRoute: '/',
  routes: {
    '/': (context) => FirstPage(),
    '/second': (context) => SecondPage(),
  },
);

이때 참고로 routes 를 변수로 빼내어 따로 사용이 가능합니다.

<예시>

class RouteName {
  static const home = '/';
  static const addLocation = '/addLocation';
  static const editLocation = '/editLocation';
  static const markerListScreen = '/markerListScreen';
}

var nameRoutes = {
  RouteName.home: (context) => const HomePage(),
  RouteName.addLocation: (context) => const AddLocationScreen(),
  RouteName.editLocation: (contxt) => const EditLocationScreen(),
  RouteName.markerListScreen: (context) => const MarkerListScreen(),
};

이제 라우트 이름을 사용하여 FirstPage에서 SecondPage로 이동할 수 있습니다.

// 페이지 이동 코드
Navigator.pushNamed(context, '/second');

2. Navigator.push():

Navigator.push() 메서드는 주로 페이지 객체를 직접 전달할 때 사용됩니다. 이 방법은 MaterialPageRoute와 같은 페이지 경로를 사용하여 구체적인 페이지 객체를 직접 만들어 전달합니다. 이 방법은 더 유연한 방법이지만, 명시적인 라우트 이름이 없어 관리가 어려울 수 있습니다.

// 페이지 이동 코드
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) => SecondPage(),
  ),
);

뒤로가기

Navigator.pop();

// 이전 페이지로 돌아가는 코드
Navigator.pop(context);