Navigator를 사용한 화면 간 데이터 전달

데이터 전달 방법

1. Constructor를 통한 데이터 전달

가장 간단한 방법은 새로운 화면의 Constructor에 데이터를 전달하는 것이다.

 

먼저 스크린을 2개로 나눈다.

하나는 first_screen.dart 스크린이고, 다른 하나는 second_screen.dart 스크린이다. 

베이스 코드는 Navigator 포스트에 대한 코드를 베이스로 한다. 

https://codejunh-develop.tistory.com/111

Navigator

first_screen.dart

first_screen.dart 코드에 second_screen.dart 스크린으로 이동할 수 있는 버튼인 ElevatedButton을 추가하고, ElevatedButton 위젯의 onPressed 파라미터 함수에 Navigator 위젯을 넣어준다. 

MaterialPageRoute 클래스의 builder 함수안에 date 파라미터를 넣고, second_screen.dart 스크린으로 전달하고자 하는 값을 넣어준다. 

 

first_screen.dart 전체 코드

 

second_screen.dart 

builder 파라미터의 반환 클래스로 SecondScreen() 클래스를 반환하였다. 

SecondScreen() 클래스안에 data라는 파라미터를 사용할 수 있었던 것은 StatefulWidget위젯을 상속하는 SecondScreen 클래스안에 data 변수를 선언하였고, 생성자를 사용해 외부로부터 값을 필수로 받아오게끔 하였기 때문이다. 

first_screen.dart 코드에서 받아온 데이터는 StatefulWidget위젯을 상속하는 SecondScreen 클래스안에 저장된다. 

그리고 StatefulWidget위젯을 상속하는 SecondScreen 클래스는 State를 상속하는 _SecondScreenState 클래스와 연동되어 있기 때문에 _SecondScreenState 클래스안에서 사용할 수 있다. 

 

다만, StatefulWidget위젯을 상속하는 SecondScreen 클래스안에 데이터가 저장되어 있기 때문에 widget이라는 변수를 통해 StatefulWidget위젯을 상속하는 SecondScreen 클래스를 가리키게 한다. 

 

second_screen.dart  전체 코드

 

실행 결과

실행 결과를 보면, first_screen.dart 코드에 적힌 Hello라는 데이터가 second_screen.dart 스크린으로 이동되어 표시되는 것을 볼 수 있다. 

 

2. arguments를 통한 데이터 전달

Named Route를 사용할 때는 arguments를 통해 데이터를 전달할 수 있다.

Named Route란? 

Named Route는 Flutter에서 화면을 이름으로 관리하는 방법이다.

기본적으로 Flutter에서는 Anonymous Route를 사용하여 화면을 관리하지만, Named Route를 사용하면 더 직관적이고 관리하기 쉬운 코드를 작성할 수 있다.

 

Named Route 정의

Named Route를 사용하려면 먼저 MaterialApp의 routes 속성에 Route 이름과 해당 Route의 빌더 함수를 등록해야 한다. 

• routes 속성에 Map<String, WidgetBuilder> 형태로 Route 이름과 해당 Route의 빌더 함수를 등록한다.
• initialRoute 속성에는 앱이 시작될 때 표시할 초기 Route의 이름을 지정한다.

 

Named Route 사용

Named Route를 사용하여 화면을 전환할 때는 Navigator.pushNamed와 Navigator.popUntil을 사용한다.

 

• Navigator.pushNamed를 사용하여 지정한 이름의 Route로 이동한다.
• Navigator.popUntil을 사용하여 지정한 이름의 Route가 나올 때까지 화면을 pop한다.

 

Named Route를 사용하기 위해 MaterialApp 위젯에 기본 설정을 한다. 

 

first_screen.dart

first_screen.dart 파일의 _FirstScreenState 클래스의 ElevatedButton 위젯의 onPressed 파라미터 함수에 다음과 같이 정의해준다. 

 

• Navigator.pushNamed를 사용하여 Named Route를 호출한다.
• arguments 파라미터를 통해 데이터를 전달한다.

 

first_screen.dart 전체 코드

second_screen.dart

State를 상속하는 _SecondScreenState 클래스 build 함수 내부에 ModalRoute.of(context)!.settings.arguments를 사용하여 전달받은 데이터를 가져온다.

왜 build() 함수안에 정의할까?

context는 위젯 트리에 대한 정보를 가지고 있다.

build() 함수 내부에 final data = ModalRoute.of(context)!.settings.arguments as String;를 선언한 이유는 build() 함수가 호출될 때마다 context를 통해 전달된 인자를 최신 상태로 가져오기 위함이다.

context는 build() 함수가 호출될 때마다 업데이트되므로, build() 함수 외부에 선언하면 최신 데이터를 반영하지 못할 수 있다.

 

initState() 함수 사용

만약 build() 함수 외부에 선언하고 싶다면, initState() 메서드에서 초기화할 수 있다.

하지만 이 경우, context가 초기화되기 전에 접근할 수 없으므로 주의가 필요하다.

예를 들어, initState()에서 초기화하는 방법은 다음과 같다:

이렇게 하면 data는 build() 함수 외부에서 초기화되지만, 여전히 context를 통해 전달된 최신 데이터를 반영할 수 있다.

1. ModalRoute.of(context):
현재 context에 해당하는 ModalRoute 객체를 가져온다.

ModalRoute는 Flutter에서 화면 전환 시 사용되는 라우트이다.

2. !.settings.arguments:
ModalRoute 객체의 settings 속성에 접근한다.

settings는 라우트의 설정 정보를 담고 있다.
arguments는 라우트를 통해 전달된 인자를 의미한다.

 

!는 null이 아님을 보장하는 null-safety 연산자이다.

즉, ModalRoute.of(context)가 null이 아님을 확신할 때 사용한다.

3. as String:
arguments를 String 타입으로 캐스팅한다.

이는 전달된 인자가 String 타입임을 가정하고, 타입 변환을 수행한다.

캐스팅(casting) 이란?

캐스팅(casting)은 변환(conversion)과는 약간 다르다.

캐스팅은 객체의 타입을 다른 타입으로 해석하는 것이고, 변환은 실제로 객체의 값을 다른 타입으로 바꾸는 것이다.

예를 들어, as String은 arguments가 실제로 String 타입이라고 가정하고 그 타입으로 해석하는 것이다. 이

 

이는 객체의 타입을 바꾸는 것이 아니라, 타입을 명시적으로 지정하는 것이다.

 

따라서, as String은 arguments가 String 타입임을 확신하고 그 타입으로 해석하는 캐스팅 작업이다.

 

즉, 이 코드는 현재 화면으로 전달된 인자를 String 타입으로 가져와 data 변수에 저장한다.

이 변수는 이후에 화면에서 데이터를 표시하는 데 사용된다.

 

가져온 data를 Text 위젯에 표시한다.

 

second_screen.dart  전체 코드

실행 결과

 

3. 상태 관리 라이브러리를 통한 데이터 전달

Flutter에는 Provider, Riverpod, BLoC 등 다양한 상태 관리 라이브러리들이 있다.

이런 라이브러리들을 활용하면 앱의 상태를 효율적으로 관리하고, 화면 간에 데이터를 쉽게 전달할 수 있다.