오늘 배워볼 부분은 앱의 기초인 페이지 만들기이다.
그동안 main 페이지 하나만 만들어 그안에서만 기능을 구현하였다..
이번엔 여럿 페이지를 만들어 페이지간 이동을 해보자
페이지간 이동은 기본적으로 스택을 기본으로한다.
페이지 위에 다른페이지를 올려 화면에 띄우는 방식이다.
해당 부분은 유튜브에 영상이 많으니 한번 이해하고 오는것이 좋을꺼같다.
페이지는 screenA, B, C 총 3가지 이며 한 페이지에 다른 두개의 페이지에 넘어갈수 있도록 구현해볼것이다.
프로젝트/lib/ 경로에 screenA, B, C 3가지 파일을 새롭게 만들어보자
main.dart 에는 위처럼 screenA를 홈으로 지정해준다.
이제 A,B,C 각 페이지 코드는 정말 비슷하므로 screenA를 예로 들겠다.
- appbar
- body
- center
- colum
- ElevatedButton
- ElevatedButton
이런 구조로 되어있다.
여기서 한가지 알아야할점이 있다면 좀 오래된 강의를 보면 처음보는 버튼 이름이 나와있을것이다.
위 ElevatedButton도 이전에는 RaisedButton였다.
아래 그림을 참고하자
Navigator push코드를 보자
push - 화면 최상단에 띄우는것이다. (스택 맨위)
뒤쪽 MaterialPageRoute는 안드로이드에서 제공하는 에니메이션?? 이라고한다.
그래서 CupertinoPageRoute로 변경하여 실행해보면 화면 넘김 애니메이션이 좀 다르다.
pop - 화면을 지우는것이다.
예를 들어 A -> B -> A 의 경우 push를 2번( A -> B , B -> A) 이렇게 사용할수 있지만 이런경우 스택이 총 3개 쌓인다.
push 1회 pop 1회 이렇게 구성하면 B 화면을 push했다 pop 하기 때문에 스택이 1개 만 쌓이게 되는것이다.
Navigator 코드 첫번째 context는 왼쪽에 보이는 코드 위쪽 나와있는 context와 일치해야하며
두변째 context는 상관없다 따라서 _ 를 해도좋다.
앱을 구동해보면 앱바 왼쪽에 뒤로가기 버튼이 생기는것을 볼 수 있다.
이게 pop역활을 하는것이다.
따라서 앱바가 있는경우 pop을 구현할 필요는 없다..
이제 다중 페이지를 쉽게 구현하기 위해 initialRoute를 사용하여 구현해보자
main.dart의 코드이다.
home: 대신 initinalRoute를 사용했고
첫 페이지는 / 를 사용해야한다.
initinalRoute: '/'
/ 페이지를 home으로 지정하겠다. 이다.
아래 routes 는 앱에서 사용될 페이지들을
지정해주는 코드이다.
A, B, C 차례대로 /, /b, /c 이렇게
이름으로 지정해줬다.
Navigator.pushNamed
를 이용하여 작성하면 된다.