플러터, flutter) 화면을 전환하는 방법, Navigator (push, pushNamed + data 이동방법 ModalRoute)

<기본적인 방법>

버튼이 클릭 되었을 때, 위 함수를 시키면 CategoryMealsScreen() 이라는 위젯이 새로운 페이지로 형성된다.

그리고 당연히 screen stack 맨위에 쌓인다.

 

우리는 화면 간 이동을 할 때, Navigator를 사용한다.

스택정보와 위젯들의 여러 관계를 파악하기 위해 context를 필요로 하며. 그 정보를 바탕으로

push와 pop이 가능하다.

 

그리고 pushNamed, pushAndRemove 등 다양한 부가 기능들도 가능하다.

 

push에 인자로 들어가는 것은 페이지 관련 위젯이고,

MaterialPageRoute이나 CuppetinoPageRoute도 가능하다

 

MaterialPageRoute안에 빌더에 생성되길 원하는 위젯을 넣으면 되는데,

그 위젯에는 scaffold가 있어야 한다. 페이지에 뼈대를 잡아줄 수 있는 위젯이 필요하기 때문,

또한 생성자를 통해서 data를 전달해서 맞춤형 페이지가 가능하다.

 

<좀 더 복잡하지만, 깔끔한 방법>

만약 앱이 커져서 페이지 수가 매우 많아지고, 그렇게 되면 일일이 위젯에 저렇게 메소드를 마구마구 넣어두는 건,

관리하기가 매우 어려워질 것이다. 하나의 위젯이 바뀌기만 해도 여러번 고쳐야 할 수도 있고

bug의 가능성이 매우 높아진다. 그래서 우리는 Route들을 하나로 관리할 수 있다.

 

바로 MaterialApp > routes 라는 속성으로 말이다.

 

여기를 보면 MaterialApp 안에 routes 속성을 둘 수 있음을 알 수 있다.

또한, routes는 Map을 인자로 받는데, key는 string 타입이고, value는 위젯을 return하고, context를 인자로 받는 function이다.

 

value 값은 페이지를 생성하는 builder다. 따라서 저기서 return되는 위젯은 scaffold 위젯을 가진 페이지를 형성할 수 있는 위젯이어야 한다.

 

이런식으로 Map이니까 { } 를 활용해주고, key값은 아무런 string값이면 된다. 

다만 flutter는 웹에서 따온 개념들이 많아서, url처럼 /로 시작하는 경우가 많다만, 편한대로 하면 된다.

그런데 문제가 있다.

MaterialApp단위에서 routes들을 설정하면, data를 어떻게 넘겨 줄 것인가?

일단 routes가 있는 class에 데이터가 있다면, 그냥 생성자를 통해서 넘겨주어도 된다. 

 

but data가 그 class에 없다면??

이는 방법이 따로 있다.

 

우리는 Navigator를 통해 push할 때, data를 집어 넣을 것이다.

routes를 사용하게 되면, 저렇게 key: builder 형태로 Map이 형성된다.

따라서, Navigator를 쓸 때는 pushNamed라는 메소드를 통해 안에 루트의 key값을 그대로 넣어준다.

그리고 여기에 우리가 원하는 data를 arguments라는 속성을 이용해 함께 넣을 수 있다.

arguments의 인자는 Object이다. 아무거나 다 가능하다.

data가 여러개 라면 당연히 collection 형태가 좋을 것이다.

여기서는 맵을 활용했다.

 

그러면 Data는 어떻게 읽어올까?

1. 일단 생성자 부분에서 변수를 설정하게 되면 생성자를 따로 선언해주어야 하므로, 다 지워준다. 어차피 필요없기 떄문이다. 

 

2. build 메소드에서, ModalRoute라는 class를 활용해서 data를 얻어온다.

of.context에서 settings에 arguments가 있다. 얘는 object이므로, 

as~를 활용해서 확실하게 data type을 변환해주면, value를 읽어올 때도 에러가 뜨지 않는다.

 

build를 할 때, data를 읽어와서 변수를 선언하고,

곧장 초기화 한 뒤 그 value를 사용하면 된다.

 

 

 

이 부분이 복잡해 보일 순 있지만, 필요한 절차이다.

앱이 커지면 역시 clean code가 중요하다.