[Flutter] Navigator, 값 전달/받기

Flutter의 기능 중 꼭 알아야 하는 것이 있다면 바로 Navigator에 대한 것이다. 실제로 다양한 Route방법이 있지만 그 중에서도 조금은 간단한 방법을 기억하고자 글을 적는다.

void main() {
  runApp(MaterialApp(
    title: "MemoApp",
    initialRoute: '/',
    routes: {
      '/': (context) => Root(),
      '/A': (context) => A(),
      '/B': (context) => B(),
    },
  ));
}

다음과 같이 라우트를 등록하고 A화면으로는 값을 수신하고 B화면으로는 값을 발신한다고 하면 다음과 같이 하면된다.

onPressed: () async {
          var result = await Navigator.pushNamed(context, '/A');
          setState(() {
            info.add(result as String);
          });
        },

먼저 Navigator로 등록된 route를 참조하여 화면을 전환하는 코드이다. 코드를 보면 알겠지만 전환된 화면에서 값을 받는 코드는 저렇게 작성할 수 있다. onPressed 이벤트에만 종속되는 것이 아니니 필요한 이벤트에 위의 코드를 쓸 수 있다.

그리고 Route에 등록된 A 클래스를 보자

String text = ""; //class에 정의 되어있는 변수 값

Scaffold(
        appBar: AppBar(title: Text("EditPage")),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Form(
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(hintText: 'SomeText'),
                    onChanged: (value) {
                      text = value;
                    },
                  ),
                  ElevatedButton(
                      onPressed: () {
                        Navigator.pop(context, text); /// 핵심
                      },
                      child: Text("ADD"))
                ],
              ),
            ),
          ),
        ));

코드를 보면 알겠지만, TextFormField에서 값이 변경될 때 마다 변수에 저장하고 그 값을 Add라는 버튼을 클리하면 push된 Navigator를 pop하고 값을 같이 넘겨준다.

---

그리고 값을 발신하는 예제

onTap: () {
              Navigator.pushNamed(context, '/B', arguments: "Hello");
            },

값을 수신할 때와 마찬가지로 Navigator를 push하는 것은 같으나 이후 argument를 함께 전달해주는 것이 차이점이다.

그리고 나서 B 클래스의 Widget build를 하면서 아래의 코드를 이용해 context에 전달된 argument값을 받아와 자유롭게 사용할 수 있다.

String? tmp = ModalRoute.of(context)?.settings.arguments.toString();