플러터(Flutter) 입문 5. 페이지 이동하기

저번 포스팅에서

SecondMan 이라는 Scaffold() 를 return 하는 클래스를 만들었고,

그것을 새로운 다트파일에 써줬어어요.

 

 

 

Scaffold() 라는것을 return 해주는 형태니까 이놈은 페이지 라는걸 알수있겠죠?

그래서 이번시간에는

 

맨처음 만든페이지 -> 저번포스팅에서 새로만든페이지(SecondMan) 

 

이렇게 페이지 이동을 해볼거에요.

 

1. 페이지 이동

 

먼저 SecondMan 이페이지를 약간만 꾸며볼게요.

 

앱바에 제목주고

body에 글하나 준게 다에요.

별로 어렵지 않죠.

 

 

그다음 우리가 맨처음 만든 페이지 

FirstBackSu 에서 Container 를 하나 더 만들어 줍니다.

 

 

 

저거를 누르면 두번째 페이지로 이동하게 할거에요.

 

그렇게 하기위해서는 "이거를 누르세요" 라고 되어있는부분을 Button 화를 시켜줘야해요.

 

Container 를 GestureDetector 라는걸로 감싸주세요.

 

 

감싸주는 방법은 손으로 일일이 쳐도되지만

Container를 감싸려면 Container를 한번 클릭한뒤에 Alt+enter 를 치면

이렇게 쭉 나와요

 

Wrap with widget

Wrap with Center

.

.

.

 

Wrap with GestureDetector 가 있으면 좋겠는데 없네요.

그래서 그냥 Wrap with widget 을 클릭해주세요

 

 

그러면 Container 가 widget으로 감싸져요.

 

widge을 지우고 GestureDetector 라고 적어주세요.

 

 

이렇게 잘 감싸줬어요.

 

저걸로 감싸주면 끝이 아니에요.

이렇게 감싸주면 GestureDetector 안에 child 옵션이 Container 가 된게 보여요.

 

GestureDetector 에 다른옵션들이 엄청 많아요.

이름에서 알수있듯이 행동감지기 뭐 이런느낌이에요.

 

많고많은 옵션중에 onTap 을 써봅시다.

onTap : 

이라고 나오면  () {} 을 옆에 적어주세요.

 

그리고 {  } 이사이에 우리가 원하는걸 적을거에요.

 

그러면 손으로 클릭했을때 { } 안에 것이 발동하게되요.

 

그러면 연습으로 

print("안녕어어엉"); 을 적어보세요.

 

그리고 번개 모양을 눌러 Hot reload 를 시켜줍니다.

 

그러니 저기 "이거를 누르세요"

를 누르니까, 아래 안녕어어엉 이 뜨네요.

print 는 다트 내장함수로 아래 콘솔이라는 곳에 글씨를 나타내줘요.

 

 

 

어쨋든 이것을 할건 아니고, 페이지 이동해야겠죠.

 

Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondMan()),
);

 

이라고 적어주세요. 페이지를 이동하는 함수입니다.

빨강색으로 적은게 우리가 2번째로 만든 페이지의 클래스이름이에요.

 

 

누르니까 2번째페이지로 진짜 이동이되네요.

 

<누르니까 다시돌아와요.

이렇게 페이지 이동을 해봤어요.

 

그런데 사실 이게 페이지 이동이라고 해서 뭐 순간이동하고 뭐 그런개념이 아니에요.

페이지가 이동하는건 그렇게 보이는거에요.

 

사실 첫번째 페이지 위에다가 2번째페이지를 얹은거에요.

페이지가 3개 4개 되도 마찬가지의 원리죠.

 

 

 

그리고 2번째페이지에서 뒤로가기누르면 2번째페이지를 불로 태워서 영구히 사라지게 만들어요.

이게 뒤로가기 원리죠.

 

 

페이지 이동이 이런 원리랍니다.

2. 클래스에 아규먼트 주기

첫번째 페이지에서 두번째 페이지로 이동할때, 어떤 값을 줄수가 있어요.

 

첫번째 페이지가 주고, 두번째 페이지가 받는것이죠.

그 주는것을 아규먼트 라고 해요.

 

먼저 받는쪽에서 뭐받을지 적어야되요.

 

먼저 두번째 페이지인 SecondMan 클래스에서 아래 위치에

 

String name;

 

이라고 적어주세요. 이건 SecondMan 에서 사용하게될 "변수" 를 생성한거에요.

 

 

그뒤 String name="김똘똘"; 이라고 적어볼게요.

그다음 Body 부분에 기존에 "두번째 페이지입니다다아아아ㅏ"라고 적은 아무 의미없는 글귀를 지우고

거기에 name 을 넣어주세요.

 

 

name 을 넣어준행위는, 글씨를 넣은게 아니라 변수를 넣은 행위에요.

 

그리고 저기 앞에 String은 뭐냐? 바로 name 이라는 변수의 형태 에요

"김똘똘" 이렇게 생긴형태는 글귀에요. 글귀는 String 이라는 형태에요.

플러터 다트 뿐만아니라, 거의모든 프로그래밍 언어에서 글자변수는 String 이라는 형태를 가져요.

 

이 형태를 자료형태라고 하고 쉽게 자료형 이라고 불러요.

 

그래서 앞으로는 String 자료형을 가지는 name 변수를 만들어주고 김똘똘이라는 값을 주세요 라고하면

저렇게 적으면됩니다.

 

그다음 플레이 해보면

 

 

 

이렇게 김똘똘 이 나오는걸 알수있습니다.

 

그런데 변수는 정해지지 않은 임의의 값 인데 name 이라는 변수는 항상 김똘똘 이라는 값을 가지겠죠?

 

그래서 좀 바꿔볼게요.

 

 

name 변수값에 할당되었던 김똘똘을 지우고

 

아래에

SecondMan(this.name);

 

라고 적어줬어요. 이것을 "생성자" 라고해요.

생성시켜주는 놈 이라고 알면되는데, 개념이 잘 들어오지 않을테니 그냥 적어주세요.

 

이렇게 적으면 SecondMan 을 부르는 페이지(첫번째페이지) 에서 반드시 name 값을 줘야해요.

(반드시에 빨강글씨를 친 이유는, 지금 이상황에서는 반드시 줘야해요.)

 

어쨋든 첫번째 페이지로 넘어간뒤

원래 SecondMan() 이렇게 적힌곳 (괄호) 에

"홍길동이" 라고 적어주세요. 

 

 

그리고 다시 실행해보면 이렇게 "홍길동이" 라고 나오게됩니다.

 

홍길동이 라고 나오게 된이유는 첫번째페이지에서 두번째페이지로 값을 넘겨줬기 때문이에요.

이런식으로 값을 넘기면 되는겁니다.

값을 1개만 넘기면 좀 심심하니 4개정도 넣어볼게요.

 

age,gender,isKorean을 넘겨보겠습니다.

 

age 는 int 라는 자료형을 가질겁니다. int 는 정수형태를 가집니다.(-1, -2 , 0 , 1 , 2 , 3......) 무슨느낌인줄 알겠죠? 딱떨어지는 숫자요.

gender는 그대로 String을 가질게요. "남자" , "여자" 뭐 이런식이겠죠?

isKorean은 bool 이라는 자료형을 가질겁니다. 한국인인지 아닌지 여부죠.  true , false 참 거짓이라는 2가지중에 한개를 가지게 됩니다.

 

 

이렇게 하고, 아래에 Text로 나타낼부분도 4개를 만들어주세요.

 

그런데 보시면 

 

age.toString()

isKorean.toSring()

 

이라고 되어있습니다. 그이유는 Text라는 위젯이 String 자료형만 받기 때문이죠. 그래서 .toString 을 통해 String 처럼 만들어줘야합니다.

 

첫번째 페이지에서도 순서대로 적어줍니다.

 

이렇게 하고 다시 플레이를 새로 누르니 잘 나타났죠.

 

그런데 여기서 문제점은 꼭 순서대로 적어야된다는겁니다.

1개 2개 또는 4개까지야 어떻게 순서대로 적을수있겠지만,

아규먼트가 10개 이렇게 되면 순서를 어떻게 기억하겠습니까?

 

그래서 한가지 장치를 해줄겁니다.

SecondMan 클래스로 가서 아래처럼 바꿔주세요.

뭐가 바꼈냐구요?

SecondMan(this.name,this.age,this.gender,this.isKorean);

이것이

 

SecondMan({this.name,this.age,this.gender,this.isKorean});

이렇게 바꼈습니다.

 

{ } 이게 생겼습니다.

 

이렇게 하면 첫번째 페이지에서 넘겨주는 형태가 바뀌게됩니다.

name :  이것처럼 땡땡을 붙여서 아규먼트를 줄수가 있습니다. 순서에 상관없이요.

 

그리고 순서대로 적어야했을때는 모든 아규먼트를 다적어줘야 오류가 안났습니다.

4개의 아규먼트를 받는걸로 되어있으면 4개를 모두 줬어야 했죠.

 

그런데 이거는 4개가 받는걸로 되어있어도 3개만 줘도 됩니다. 물론 2개만 줘도 되죠.

실험삼아 name 을 안줘보겠습니다.

 

3. Null값 분기처리

 

이렇게 name 을 지웠어요.

그리고 플레이 해봅니다.

 

 

그럼 이렇게 오류가 뜨게 됩니다.

그이유는 다른이유가 아니라, 두번째 페이지에서 Text(name) 이 있기때문입니다.

첫번째페이지에서 name 을 안줬기 때문에 나타낼 뭔가가 없기때문이죠. null 이라고 표현합니다.

name 이라는 변수명은 있는데 그 변수명에 들어가는 이름값이 없죠.

변수명은 있는데 그 변수에대한 값이 없을때 null 값을 가진다 라고 합니다.

널 또는 눌 이라고 발음하시면 됩니다. 

 

그러면 이때 경우에대한 처리를 해주면됩니다. "분기 처리" 해준다고 합니다.

Text(name) 이라고 적혀있던것을

Text(name??"김아무개") 라고 적었습니다.

이뜻은 name 이라는 변수가 null일때는 ??뒤의 "김아무개" 를 넣고 null 이 아닐때는 name 을받아라

이뜻입니다.

 

다시 플레이 해보면

이렇게 잘 나오는걸 볼수있습니다.

우리가 방금한것은 null 값에 대한 분기 처리 였습니다.

 

 

이런식으로 클레스 사이사이에서 데이터를 주고받고가 일어나게 됩니다. 

 

 

다음포스팅에서는 라이브러리를 사용해볼거에요.

GetX 라는 라이브러리를 이용해서 페이지 이동을 좀더 간편하게 해볼게요.

 

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com