Navigator Flutter에서 상태 및 탐색 관리

Flutter에서 Navigator 앱의 중앙 집중식 상태 및 페이지 탐색을 관리하기 위한 강력한 도구입니다. 이를 통해 명확한 아키텍처와 화면 간 간편한 탐색으로 앱을 빌드할 수 있습니다.

정의 Routes

사용을 시작하려면 앱에서 Navigator 정의해야 합니다. 사용자가 탐색할 수 있는 개별 화면입니다. MaterialApp을 사용하여 정의하고 컬렉션을 제공 할 수 있습니다. 여기서 각각은 에 매핑됩니다. routes Routes routes routes route Widget

예:

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

routes 위의 예에서 두 개의: '/'(home page) 및) 를 정의했습니다 '/second'(second page. routes 필요한 만큼 추가할 수 있습니다 .

페이지 간 탐색

페이지 사이를 이동하려면 Navigator 의 메소드를 사용할 수 있습니다. 일반적인 방법 중 하나는 pushNamed로, 해당 페이지의 이름을 제공하여 다른 페이지로 이동할 수 있습니다 route.

예:

// Navigate to the second page
Navigator.pushNamed(context, '/second');

또한 푸시 방법을 사용하여 다른 페이지로 이동 route 하고 페이지 간에 전환할 수 있습니다.

페이지 간 데이터 전달

arguments 매개 변수와 함께 pushNamed 메서드를 사용하여 페이지 간에 데이터를 전달할 수 있습니다.

예:

Navigator.pushNamed(  
  context,  
  '/second',  
  arguments: 'Data from the home page',  
);  

그런 다음 ModalRoute.of 및 설정 개체를 사용하여 두 번째 페이지의 데이터에 액세스할 수 있습니다.

class SecondPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    String data = ModalRoute.of(context).settings.arguments;  
    // Use the data here  
  }  
}  

이전 페이지로 돌아가기

이전 페이지로 돌아가려면 의 pop 메서드를 사용할 수 있습니다 Navigator. 이렇게 하면 현재 페이지가 닫히고 스택의 이전 페이지로 돌아갑니다.

예:

// Go back to the previous page
Navigator.pop(context);

 

결론

Navigator Flutter에서는 중앙 집중식 상태를 관리하고 페이지 간을 쉽게 탐색할 수 있습니다. 를 사용하면 Navigator 명확한 아키텍처로 앱을 빌드하고 화면 간을 탐색할 때 더 나은 사용자 경험을 제공할 수 있습니다.