Flutter - Navigator.pop 이전 화면으로 현재 화면의 값 넘기기

개요

Navigator를 이용하여 이동된 페이지에서 다시 이전 화면으로 pop하여 돌아갈 경우,

현재 페이지의 값을 이전 페이지에게 넘겨야 할 때가 있다.

이는 상태 관리 패키지(Provider, getX 등)를 이용하여 값을 공유하는 방법도 있지만

단순히 일회성의 데이터 전달이 필요할 경우는 굳이 상태 관리 패키지를 이용하기에는 번거롭다.

네비게이터에서는 페이지가 pop되어 이전 페이지로 되돌아갈 때 현재 페이지의 값을 넘겨주는 방법이 있다.

이번 포스팅에서는 Navigator.pop에서 값을 전달할 수 있는 파라미터를 이용하여

현재 페이지와 이전 페이지의 값을 전달해보자.

<Navigator.pop으로 이전 페이지로 이동할 때 값을 전달하는 화면 예시>

 

포스팅에서 설명하는 프로젝트는 깃허브에서 다운로드 가능하다.

• https://github.com/luvris2/flutter-example
• 하위 경로 : flutter_navigator_data_transfer_example

GitHub - luvris2/flutter-example

---

Navagator.pop 구문

Navigator.pop(context, param)

 

• context : 현재 위젯의 위치
• param : 페이지가 pop될 때 전달할 값

 

[ 파라미터 값 반환하기 예시 구문 ]

// page A
final result = await Navigator.push(
	context,
    MaterialPageRoute(
		builder: (context) => NavigatorSecond(value: value),
    ),
)
debugPrint(result);

// page B
string param = "Eunbyeol";
Navigator.pop(context, param)

// debugPrint : Eunbyeol

---

예시

요구사항 설계

메인 페이지

1. 텍스트 위젯으로 메인 페이지에 값을 표시
2. 버튼을 통해 세컨드 페이지로 이동
3. 텍스트 위젯에 표시된 값을 세컨드 페이지로 이동할 때 전달
4. 세컨드 페이지에서 메인 페이지로 Pop되어 되돌아갈 때 세컨드 페이지에서 전달한 값을 텍스트 위젯에 다시 표시

세컨드 페이지

1. 메인 페이지에서 세컨드 페이지로 이동 될 때 전달 받은 값을 텍스트 위젯으로 값을 표시
2. 전달받은 값을 버튼(1)을 통해 터치 시 값 1씩 증가
3. 버튼(2)를 통해 메인 페이지로 Pop
4. 버튼(1)을 통해 증가된 값을 메인 페이지로 Pop될 경우 증가된 값을 다시 전달

즉, 페이지가 Pop될 경우 메인 페이지와 세컨드 페이지가 하나의 값이 공유되어야 한다.

---

코딩

메인 페이지

class NavigatorMain extends StatefulWidget {
  const NavigatorMain({super.key});

  @override
  State<NavigatorMain> createState() => _NavigatorMainState();
}

class _NavigatorMainState extends State<NavigatorMain> {
  int value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 값 표시
            Text(value.toString()),
            // 세컨드 페이지로 이동, 값 전달
            ElevatedButton(
              onPressed: () async {
                final returnValue = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => NavigatorSecond(value: value),
                  ),
                );
                // 세컨드 페이지에서 전달 받은 값 업데이트
                setState(() {
                  value = returnValue;
                });
              },
              child: const Text('Second Page로 이동'),
            ),
          ],
        ),
      ),
    );
  }
}

<메인 페이지 UI>

 

세컨드 페이지

class NavigatorSecond extends StatefulWidget {
  // 생성자로 넘겨받은 값 초기화
  final int value;
  const NavigatorSecond({super.key, required this.value});

  @override
  State<NavigatorSecond> createState() => _NavigatorSecondState();
}

class _NavigatorSecondState extends State<NavigatorSecond> {
  int returnValue = 0;

  // 생성자의 값 저장
  @override
  void initState() {
    super.initState();
    returnValue = widget.value;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 값 표시
            Text(returnValue.toString()),
            ElevatedButton(
              onPressed: () {
                // 버튼 터치 시 값을 이전 페이지로 전달하며 Pop
                Navigator.pop(context, returnValue);
              },
              child: const Text('Main Page로 이동'),
            ),
            // 버튼 터치 시 값 + 1 증가
            ElevatedButton(
              onPressed: () {
                setState(() {
                  returnValue += 1;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

<세컨드 페이지 UI>