페이지 이동 (Navigator, Route)

페이지 이동에는 크게 2가지 파트가 있다. 

- 위젯을 상속한 클래스를 생성하고 호출하여 직접 이동

- 이동 단위(?) 를 Route 라고 한다

- materialapp 또는 cupertinoapp 에 미리 Route 를 정의하고, string 값인 name을 통해 이동

 

1. 직접 이동  
     - 애니메이션 효과를 위해 MaterialPageRoute 함수를 이용한다. 

     - Navigator.push() 를 이용하여 이동한다. 이때 현재 페이지는 history인 Route에 쌓이게 된다. 

Navigator.push(context, MaterialPageRoute(builder : (context) => 이동할 클래스명()),);

     - 이전 페이지, 즉 이전 Route로 돌아가기 위해서는 Navigator.pop(context) 를 사용하면 된다. 

 

2. Route 정의하기

       - MaterialApp 혹은 CupertinoApp 함수 인자값인 routes 에 정의

       - <string, WidgetBuilder> 형태로 페이지 정의

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      routes: <String,WidgetBuilder>{
        '/페이지명1' : (BuildContext (context) => Widget클래스명1(),
        '/페이지명2' : (BuildContext (context) => Widget클래스명2(),
        
        )
      },
    );
  }
}

 

3. name을 통해 이동

     - 이동하기 : Navigator.pushNamed(context, '이동할 페이지명');

     - 앞으로 되돌아가기 : Navitator.pop(context);

 

4. 인자값 전달하기. 

     - 전달할 클래스 생성

class testclass {
	string arg1;
    string arg2;
    
    testclass(this.arg1,this.arg2);
}

    - 위젯 생성 및 인자값 설정

......
@override
Widget build (BuildContext context) {
	final arg클래스명 변수명 = ModalRoute.of(context).settings.arguments;
    
    .....
    
    변수명.arg1 등으로 접근하여 사용

     - Route 설정 후 호출시 인자값 전달

Navigator.pushNamed(
	context,
    '루트이름'
    ,arguments : arg클래스명(arg1값, arg2값..),
);

 

5. 이전 화면으로 되돌아 갈때 데이터 반환

     - Navigator.pop 함수에 리턴할 인자값 포함

...
Navigator.pop(context,리턴값);
...

    - Navigator.push 시, await 사용 (해당 코드가 포함된 함수에 Future 선언이 되어 있어야 한다.)

.....
final result = await Navigator.push
	(context,
     MaterialPageRoute(builder:(context) => 이동클래스명()),
 );
 
 ...

 

6. Navigator 함수 내용 정리

     - push, pushNamed, pop 은 위에 설명했으므로 제외

 

6.1. pushAndRemoveUntil, pushNamedAndRemoveUntil
        - 홈 루트를 제외한 모든 route를 제거하고 지정된 페이지를 push

Navigator.pushAndRemoveUntil(context, 
	MaterialPageRoute(builder:(context) => 이동할페이지클래스()),루트클래스
);


Navigator.pushNamedAndRemoveUntil(context, '루트명', 루트클래스);

 

6.2. popAndPushNamed

        - 현재 페이지를 pop 하고 지정한 페이지를 push

Navigator.popAndPushNamed(context,'route명');

6.3. canPop

        - pop이 가능한지 여부를 bool 로 리턴
        - 인자값은 context 밖에 없음. 

 

6.4. pushReplacement, pushReplacementNamed
        - 현재 화면을 대체함.

Route route = MaterialPageRoute(builder: (context) => NextPage());
Navigator.pushReplacement(context, route);

Navigator.pushReplacementNamed(context, '루트명');