네임드 라우트로 화면이동 하기

이전에 새로운 라우트를 만드어서 그것을 Naivgator에 push하여 새로운 화면으로 화면전환하는 방법을 배웠습니다. 그러나 만약 같은 화면으로 이동해야한다면, 똑같은 코드를 복제해야하는 문제가 생기게 됩니다. 이럴 경우 네임드 라우트(named route)를 사용하는 것이 편리합니다.

네임드 라우트를 사용하기 위해서는 Navigator.pushNamed 함수를 사용합니다. 이 예제에서는 네임드 라우트를 사용하는 방법을 보겠습니다.

디렉션

1. 두 스크린만들기

2. 라우트 정의

3. Navigator.pushNamed 를 사용해 두번째 화면으로 이동하기

4. Navigator.pop을 사용하 첫 번째 화면으로 돌아오기

1. 두 스크린 만들기

먼저, 화면 두 개가 필요합니다. 첫 번재 화면은 두번째 화면으로 이동 시키기 위한 버튼을 가지고 있고, 두 번 째 화면은 첫 번째 화면으로 돌아오기 위한 버튼을 가지고 있습니다.

Class FirstScreen extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Scaffold(

      appBar:AppBar(title:Text("Firset Screen")),

      body : Center(

        child : RaisedButton(

          child : Text("Launch screen"),

          onPress : (){

          }

        )

      )

    )

  }

}

class SecondScreen extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Scaffold(

      appBar : AppBar(

        title : Text("Second Screen"),

        body : Center(

          child : RaisedButton(

            child : Text("Go Back"),

            onPress : (){

            }

          )

        )

      )

    )

  }

}

2. 라우트 정의하기 

MaterialApp 생성자에 initialRoute와 routes 파라미터로 넘겨서 route를 정의 할 것입니다.

initialRoute 파라미터는 앱이 어떤 라우트로 시작할 것인지를 정의합니다. 그리고 route 파라미터는 사용할 네임드라우트와 그것으로 이동할 때 빌드할 위젯을 정의 합니다.

MaterialApp(

  initialRoute : '/',

  routes {

    '/': (context)=>FirstScreen(),

    '/second':(context)=>SecondScreen()

  }

)

3. 두번째 화면으로 이동하기

위젯과 route를 사용하여 화면이동을 할 수있습니다. Navigator.pushNamed 함수를 사용하겠습니다. 이러면 routes에 정의되어 있는 위젯을 빌드하고 화면에 표시할 것입니다.

FirstScree의 빌드 메소드의 onPressed 콜백을 수정해보겠습니다.

onPressed(){

  Navigator.pushNamed(context, '/');

}

4. 첫번째 화면으로 돌아오기

첫 번째 화면으로 돌아오기 위해서는 Navigator.pop 함수를 사용해야합니다.

onPressed(){

  Navigator.pop(context);

}

**

routes에 경로에 꼭 '/'이 들어 가야하는지 테스트해볼것.

https://flutter.dev/docs/cookbook/navigation/named-routes