---

내비게이션 사용하기

---

라우트 이해하기

화면 전환을 제공하려면 Route와 Navigator를 사용한다.

• Route는 화면을 지칭하는 객체이다.
• Navigator는 Route 객체로 화면을 전환해 준다.

---

화면 전환하기

다음 화면으로 전환: Navigator.push()
이전 화면으로 전환: Navigator.pop()

---

라우트 이름으로 화면 전환하기

push함수로 계속 전환하면 화면이 많아지면 비효율적이다. 이런 상황에서 라우트 이름으로 화면을 전환하면 효율적이다.

MaterialApp(
      initialRoute: '/one',
      routes: {
        '/one': (context) => const OneScreen(),
        '/two': (context) => const SecondScreen(),
        '/three': (context) => const ThirdScreen(),
        '/four': (context) => const FourthScreen(),
      },
    );

ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/two');
                },
                child: const Text(
                  'Go Second',
                ),
              ),

---

라우트 이름으로 화면 전환하기

Code

---

화면 전환하 때 데이터 전달하기

push(), pushNamed(), pop() 함수를 이용해 화면 전환

• push( ): push( ) 함수의 두 번째 매개변수에 라우트를 직접 준비한다.

Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen("hello")));

• pushNamed( ): arguments라는 매개변수 이용

ElevatedButton(
    onPressed: () async {
      final result =
          await Navigator.pushNamed(context, '/two', arguments: {
        "arg1": 1,
        "arg2": "hello",
        "arg3": User('kkang', 'seoul'),
      });
      print('result: ${(result as User).name}');
    },
    child: const Text(
      'Go Second',
    ),
  ),

• 데이터를 받는 곳에서는 JSON 타입의 데이터를 Map 객체로 얻어서 사용한다.

 Map<String, Object> args =
        ModalRoute.of(context)?.settings.arguments as Map<String, Object>;

• pop( ): 두 번째 매개변수 이용

ElevatedButton(
    onPressed: () {
      Navigator.pop(
        context,
        User('kim', 'busan'),
      );
    },
)

pop( ) 함수로 전달한 데이터는 화면을 전환할 때 사용했던 push( ) 나 pushNamed( ) 함수의 반환값으로 받을 수 있다.

---

동적 라우트 등록 방법 - onGenerateRoute

routes와 onGenerateRoute의 차이점

같은 라우트 이름이라도 상황에 따라 다른 화면이 나오게 하고 싶을 때가 있다. 이럴 때 데이터를 분석해 동적인 라우트가 필요할 때 onGenerateRoute속성을 사용한다

---

데이터 전달과 동적 라우트 등록하기

code