2회차 세부 과정 목차
1.첫 페이지 만들기
플러터에서 기본으로 제공해준 코드를 분석해 봤는데 , 그걸 싹 지우고 우리만의 프로젝트를 해보겠습니다.
저번시간에 처음으로 오픈했던 프로젝트를 뒤로 두고 , 새로운 프로젝트를 복습하는겸 새로만들어봅니다.
main.dart 의 main함수와 MyApp 위젯을 빼고 모두 지워줬어요.
전부 다지우고 해도 되지만 , 사실 남겨둔 저 부분은 거의 공통으로 사용되기때문에 저는 그냥 나뒀습니다.
MyApp 이라는 부분을 자신이 마음에 드는 이름으로 바꿔도 되고 상관없습니다,
home : 부분에는 제일 처음으로 진입할 페이지 위젯을 넣을겁니다.
저는 제일 처음 진입할 페이지니까 HelloPage 라고 이름붙이겠습니다.
lib에 page라는 폴더를 만들고 page안에 HelloPage.dart 라는 페이지를 만들었습니다.
그리고 HelloPage 라는 클래스를 만들고 그것을 위젯화 시켜주기위해 statelessWidget을 extend 했습니다.
되게 뭔가 용어들이 복잡해진 느낌이 드는데요.
그냥 클래스도 하나의 개념덩어리 라고 보시면 됩니다. 사람 , 동물 이라는 개념이 있는것처럼요. 그리고 그 사람이라는 것을 에뮬레이터에 보이게 하려고 위젯화를 한거라고 생각하시면 편할것 같습니다.
여기서는 HelloPage 라는것을 개념화 했고 , stateless 타입으로 Widget화 해줬다. 정도로 이해하면 됩니다.
그리고 위젯이라고 하는것은 화면에 보여지길 위해 build 라는 함수를 반드시 사용해야합니다.
그리고 우리는 지금 페이지를 만들고있기때문에 Scaffold 위젯을 리턴(반환)하였습니다.
이 의미는 어딘가에서 HelloPage 라는 위젯을 호출하면 Scaffold가 retrun(반환)된다 입니다.
빨간색으로 네모친곳은 생성자고 불리는 부분입니다. 사람이라는 개념을 만들었으면 사람을 구성하는 요소들이 이름,나이 ,키,성별 등등 이 있을것인데요,. 그런값들을 기준으로 사람이라는 1명이 생성되는것이죠. 그래서 어떤 한개를 생성시켜준다 해서 생성자입니다. 그리고 그 고유값들로 인해 생성된 하나의 사람을 인스턴스 라고 하고, 한개의 객체(Object) 라고합니다. (손님 객 짜가 아닙니다.)
그런데 지금 HelloPage 라는것은 이름,나이 이런것 없어도 하나의 인스턴스를 만들도록 되어있습니다.
key 랑 ? 랑 super 뭐 적혀있는데 , 나중에 이런 고유 요소들을 가지는 페이지 위젯을 만들어 볼것이니 , 일단 그냥 이렇게 페이지를 만들어주세요.
(참고로 맨처음 플러터 만들었을때 예시로 나오는 첫페이지 위젯에는 title이라는 요소를 받도록 되어있습니다.)
저 코드를 적는 순서를 일단 보면
1. HelloPage 라는 클래스를 생성합니다. class + 클래스명 + { }
2. 코드를 더적을건데 좀더 눈에 잘보이기 위해서 여백주기
3. 생성자 만들기
4. StatelessWidgt extends 하기 ( 이걸 StatelessWidget을 상속한다고 합니다.. 상속을 받게되면 상속을 받은 자식은 부모가 가지고있는 함수와, 변수를 사용할수있으며 재정의 할 수있습니다 .)
5.StatelessWidgt 이 가지고 있는 build 함수를 재정의 합니다. (재정의 하려면 @override 를 붙여야함)
6.Scaffold() 위젯을 리턴함( build (~~~) 이렇게 되어있는것이 함수(메소드) 라고 하는데요 build 앞에 Widget 이라고 적혀있습니다. 그 뜻은 build 라는 함수는 Widget 를 리턴해야한다 라는뜻입니다)
7.부모에게 key를 전달함. (이건 잘 모르겠는데, 이부분은 안써도 된다고 하나 가독성과, 일관성을 위해 그냥 적어주심됩니다.)
이렇게 되어있습니다. 그런데 손으로 치기 벅찬 부분이 있으므로 안드로이드 스튜디오의 자동 코드 기능을 이용하면 편합니다.
.stl 이라고만 치면 stless 라고 나올것입니다.
그리고 커서가 나오게되고 저부분에 원하는 클래스명을 집어넣으면됩니다.
stl 만 치고 선택만했는데 이렇게 자동코딩되는것은 안드로이드 스튜디오의 라이브템플릿 이라는 기능이 있기때문입니다.
stless 라는것이 입력되면 저 코드가 쓰여지도록 설정한것이죠.
나만의 라이브 템플릿도 사용할수 있으며 나중에 익숙해지면 좀더빠른 코딩을 할수있을것입니다.
본격적으로 페이지를 꾸며 보겠습니다.
Scaffold 위젯 내부에 appBar 옵션과 body 옵션을 줘보겠습니다.
appBar 부터 보자면 여기에 뭘적어야 할지 막막합니다.
그래서 appBar 부분에 마우스를 가져다 대면 Type 에 PreferredSizeWidget 이라고 적혀있습니다.
이뜻은 appBar에는 저 위젯을 사용해야 한다는 것입니다.
결론부터 말하자면 appBar 옵션에 AppBar 위젯을 넣으면 됩니다.
AppBar() 부분에 컨트롤(윈도우), 커맨드(맥) 을 누른상태에서 클릭하면 AppBar 가 정의된페이지가 열리게되는데
implements 로 PreferredSizeWidget 라고 적혀있습니다.
기본적으로 AppBar 라는 클래스는 StatefulWidget 을 상속받고 , PreferredSizeWidget 라는것도 상속받아서
타입이 여러개를 가지게 된 위젯입니다. 근대 상속은 extents 인데 implements 도 상속인가 할수있는데, 이건 인터페이스 구현을 할때 하는것인데 , 어쨋든 지금단계에서 이해하고 넘어가야할 부분은 아니니까, 그냥 appbar 에는 AppBar 라는걸 쓰면 되는구나 라고 넘어가면 됩니다.
그럼 body 에는 뭐가쓰이는지 확인해보면 Widget 이라고 적혀있는데, 이건 위젯형태면 다 된다는 것입니다.
Widget? 라고 되어있는데 여기서 ? 는 body 옵션에 Widget 이 올수도있고, null . 즉 아무것도 안와도 오류 안난다 라는 뜻입니다.
우선 그럼 body 부분은 지우고 appBar 부분만 적어서 앱을 구동해보겠습니다.
main.dart 에 home : 부분에 HelloPage() 위젯을 적고, 위에 import 해주세요.
그럼 이렇게 앱바부분에 hello 여러분 이라는 글씨가 나오게 됩니다.
AppBar 위젯 재부에 title 이라는 옵션이 있는데 이 title을 보면 Widget이 오게되어있네요.
그래서 Text() 위젯을 사용하였고, Text() 위젯에는 옵션: "" 형태가 아니고 그냥 문자열을 적었습니다.
지금까지 해온바로는 위젯에는 옵션이 있고 옵션에 뭘 적어야하는데 Text위젯은 그냥 Text("글자") 이런식으로 적으니 좀 혼동이 올수있습니다.
그부분은 클래스를 만들때 속성값일 입력할때 순서를 지켜서 넣는방법 과 명시적으로 옵션명을 적어서 주는방법이 있는데 명시적으로 주는방법이 네임드 파라미터 라고하는데 그것때문입니다.
2차 방정식에서
f(x,y) = 1 + x + y
라는것이 있으면 x에 3주고 , y에 4를 주고싶을때 f(3,4) 이런식으로 줘야지 f(4,3) 이렇게 주면 안되듯이 순서를 맞춰서 넣어야 한다는 부분이 있습니다.
그런데 만약 x , y ,a,b,c,d,e,.... 변수들이 10개가 넘어가고 이러면 순서 맞추기도 힘들것입니다. 그래서 x와 y는 첫번째와 두번째 순서대로 넣되 나머지는 순서를 안지켜도 옵션명넣은다음 값을 넣으면 된다라고 했을때 이런식으로 표현할수있을것입니다.
f(1,3 , a:3 , b:4 ,f:4 ,d:1)
그래서 지금 보이는 Text위젯도 마찬가지입니다. 첫번째는 문자열이 오고 , 그뒤로는 옵션이 오도록 플러터 회사에서 기본위젯인 Text위젯을 만들때 그렇게 설계해두었습니다. 앞으로 위젯들을 만들텐데 그때 다시 설명하면 더 쉽게 이해할것입니다.
2.경고메세지
Text 위젯을 보면 아래에 노란색줄이 그어져 있는것을 볼수있습니다. 이것은 경고에 의미인데 , 앱 구동은 잘됩니다.
무시해도되고 수정하고 가도되는데 , 저 노랑 밑줄 부분에 마우스를 올리면 안드로이드 스튜디오에서 어떻게 고치면 더 좋은지 알려줍니다.
이 경우 Text 위젯 앞에 const 를 붙이면 퍼포먼스가 향상된다는 내용입니다.
변화없는 위젯은 상수라고 하는데 이 값은 컴파일 시점에 정해져서 퍼포먼스가 향상된다고 나옵니다. 그런데 이시점에
컴파일이 뭔지 런타임이 뭔지 설명하면 머리아프니까 지금은 그냥 경고를 무시해도 앱은 돌아간다 정도만 이해하고 넘어가면 됩니다.
3.Text 위젯
저 텍스트의 폰트사이즈나 색상등을 변경하고 싶기때문에 text 위젯을 좀더 자세히 살펴보겠습니다.
옵션이 많이 있는데 , 그중 style 이라는 옵션이 있습니다. 그리고 style 옵션은 TextStyle 이라는 타입을 가진다고 나와있습니다.
마찬가지 방식으로 TextStyle 에서 fontSize 옵션과 color 옵션을 찾고 어떤 타입을 가지는지 확인하고 저처럼 적어보세요.
fontSize 옵션의 타입은 double 이라서 25.3 , 37.8 뭐 이런식으로 적어도 되지만 25.0 을선택했고 이건 그냥 25 로 적어도됩니다.
color 옵션의 타입은 Color 이고 그안에 int 를 적어라고되어있는데 색상코드를 적어주면됩니다.
근데 여기서 color 는 Color(색상코드) 이런식으로 적지만 , 사람들이 자주쓰는 색상을 플러터에서 지정해둬서 그걸 쓰면 편합니다.
이런식으로 Colors.red 라고 적었는데 이게 뭔지 찾아들어가보면 결국 Color(색상코드) 위젯을 쓰게 되어있습니다.이렇게 자주사용하는것을 Colors 처럼 클래스파일로 만든다음 사용하는 방식이 있는데 나중에 해볼겁니다.지금은 Text에 관해 이야기하고있으니 그냥 Colors.색상 이렇게 하면 되는구나 정도만 아시면 될것같네요.
그러니 정확한 색상을 구현해야한다면 Color(색상코드) 쓰면되고 , 그게 아니라면 Colors.색상 으로 사용하면됩니다.
4. body 꾸미기
Scaffold 의 body 부분도 꾸며 보겠습니다.
우선 우리가 아는 위젯이 Text위젯 밖에 없으니 Text위젯을 사용하여 body 를 꾸며보겠습니다.
그런데 좀 밍밍한것 같네요. body 부분이 Container 라는 위젯을 넣고 Container 의 child 옵션에 Text를 넣어보겠습니다.
Container 위젯은 레이아웃 과 스타일을 조정하는 성질을 가지고있는 특별한 위젯입니다. 웹에서는 <div> 태그와 비슷한 역할을 합니다.
쉽게 예를들면 비닐 봉지 라고 할수있습니다.
비닐봉지는것은 크게 비닐봉지 자체의 물성과 내용물로 이루어져 있는데요
봉지색깔이 초록색이고 내용물로 Text 위젯을 담으면 아래처럼 됩니다.
비밀봉지의 크기를 정하지 않으면 내용물( child ) 의 크기에 맞게 설정됩니다.
커다란 봉지에 사과 몇개 넣고 압축한걸로 생각하면 될것 같아요.
대충 이런 느낌인거죠.
그런데 봉지를 짜부 시키지 않고 원래의 크기를 유지하려면 봉지크기를 명시해주면됩니다.
이건 가로가 350포인트 , 세로가 500포인트 라는 의미입니다.
세로와 가로를 꽉채우고 싶으면 double.infinity 를 사용하면됩니다.
Text 위젯 1줄만 있으면 밍밍하니 3줄 정도를 만들어 보겠습니다.원래 body 의 옵션으로 Container 위젯을 주었고, Container의 내용물인 child 에는 Text위젯을 주었었는데요Container 의 내용물인 child 에 Column 이라는 레이아웃 위젯을 주고 그아래 children 에 Text 위젯 3개를 주었습니다.여기서 Column 위젯은 하부n개의 위젯들을 세로방향으로 나열하는 레이아웃 능력을 가지고있는 위젯입니다. 내용물은 n개가 될수있으니 child가 아니라 children 으로 되어있습니다.
제가 3번째 Text위젯에 다음페이지로 넘어가기 라고 적어뒀는데 , 저걸 누르면 다음페이지로 넘어갈수있도록 해볼것입니다.
5.페이지이동
페이지 이동을 다루기에 앞서 페이지란 무엇인가에 관한 이야기를 먼저 해보겠습니다.
우리가 일반 앱을 보면 어떤걸 눌렀을때 특정페이지가 열리면서 위에는 뒤로가기 버튼이 나타나는걸 볼수있습니다.
말은 페이지 이동이라고 하지만 사실은 페이지가 현재페이지 위에 쌓이게 되면서 마치 페이지가 이동한것처럼 보이게되는데 이걸 페이지 스텍 이라고 합니다.
이렇게 앱내부에서 페이지는 1페이지, 2페이지 , 3페이지가 쌓이는데 사용자 눈에는 가장 상단에 있는 페이지만 보이게 되면서 현재 3페이지 구나 라고 인식하게 되는것입니다.
그리고 뒤로가기를 누르면 페이지가 날라가면서 그전페이지가 보이는 것이죠
또는 페이지가 쌓이지 않고 교체되는 방식도 있습니다.
이건 3페이지에서 4페이지를 가도록 했는데 3페이지가 그대로 남아있는상태에서 4페이지가 쌓이는게 아니라 3페이지 자리를 4페이지를 차지하게 되는거죠. 그래서 4페이지에서 뒤로가기를 누르면 2페이지가 나오게됩니다.
실전에서는 한개만 예를들면 로딩페이지가 있고 로딩이끝나면 메인페이지가 나오는데, 메인페이지에서 로딩페이지로 뒤로 넘어갈필요가 필요가 없으니 로딩페이지를 날려버리면서 메인페이지가 나오게 할때 사용합니다.
그래서 이렇게 스택단위로 쌓이는 것을 페이지라고 합니다.
그런데 페이지 내부에 탭으로된 스크린을 페이지로 착각할수도 있는데, 이건 페이지가 아니라 스크린이라는 점을 인지해야합니다. 각층의 페이지에서 스크린이 변경되는건 페이지가 아니라 스크린이고, 페이지는 스택단위로 쌓이는것 입니다.
그럼이제 두번째 페이지로 이동하기 위해서 두가지 작업을 해주어야하는데
1. 두번째페이지 만들기
2. 첫번째 페이지에서 두번째 페이지로 가는 버튼 만들기
입니다.
lib -> page 에 FruitPage.dart 파일 을 만들고 Scaffold 를 리턴하도록 만든다음 앱바와 바디를 적었습니다.
그런데 이 페이지를 만들었지만, 페이지를 볼수가 없습니다.
이 페이지를 여는 어떤 연관 고리가 없기때문입니다.
HelloPage.dart 파일에서
마지막에 Text 위젯 부분을 GestureDetector 위젯으로 감싸줍니다.
이 위젯은 위젯을 버튼화 해주는 위젯입니다. child 옵션에 들어간 위젯을 클릭하거나 또는 꾹누르고 있거나 등등 제스쳐가 일어났을때 어떠한 액션을 주게 하는 위젯입니다.
onTab옵션의 타입을 보면 void타입의 Function 을 넣으라고 되어있습니다.
onTab 이라는 옵션에 함수를 넣으면 Text위젯을 눌럿을때 onTab 에 설정한 함수가 실행되게 됩니다.
( void Function은 안에 내용은 실행되지만 그결과값으로 아무것도 리턴하지 않는 함수입니다. void 가 뭔지 꼿히면 안되고 지금은 그냥 넘어가도록 합니다.)
onTab : somethingFunctionName
이렇게 somethingFunctionName이라고 이름을 가지고 있는 void 타입의 함수가 있다면 이 함수를 넣으면 되지만
여기서는 onTab : (){} 라고 적고 { } 안에 내용을 적어줄겁니다. 이걸 무명함수 또는 익명함수 라고 합니다. 이름이없는 함수고 재활용되지 않는 함수입니다.
어쨌든 {} 안에
Navigator.of(context).push(MaterialPageRoute(builder: (context) => FruitPage()));
라고 적어줍니다.
플러터에서 기본으로 제공하는 페이지 넘어가는 함수입니다.
(함수내부에서 한줄 작성이 완료되면 세미콜론 ; 을 붙여야 합니다.)
무슨 내용인지는 모르겠지만 Navigator 라는 어떤 클래스안에 있는 of에 push 라는 걸 붙여서 Route 통해서 FruitPage 로 가라 대충 이런내용인데 , 직관적이지도 않고 외우기도 쉽지 않습니다.
그래서 구글에 flutter 페이지 넘어가기 이런거 검색하면 저 함수가 있으니 복사해서 쓰면됩니다.
이렇게 한뒤에 Hot reload 버튼을 눌러주세요.
다음페이지로 넘어가기를 누르면 우리가 지정해둔 페이지로 넘어가는걸 볼수 있습니다.
6.GestureDetector
우리가 페이지를 넘어가기 위해 Text 위젯을 GestureDetector 위젯으로 감싸주었고
onTab을 통해 메소드를 작동 시켰습니다.
이렇게 GestrueDetector 로 감싸주면 모든 위젯을 버튼화 할수있습니다.
그런데 ButtonWidget 이나 TextButton ,IconButton 처럼 GestureDetector 로 안감싸줘도 기본적으로 버튼역할을 하는 위젯들이 있는데 그것들은 지금처럼 텍스트 위젯을 버튼처럼 활용하거나 아이콘을 버튼처럼 활용하는 경우가 많아서 따로만든다음 그 특성에 맞는 옵션들을 몇개 넣어둔것입니다.
그런 특별한 옵션 필요없이 그냥 버튼화시켜서 액션만 어떻게든 실행시키겟다 하면 그냥 GestureDetector 가 만능입니다.
옵션들을 보게되면 눌러서 내렸을때 , 두번탭했을때 , 오래눌렀을때 등등 옵션들이 있습니다.
7.Print
GestureDetector 안에
print("넘어갑니다");
라고 적은뒤에 Text위젯을 눌러보세요. 그럼 아래 콘솔의 run 부분에 넘어갑니다 라는 글씨가 나오게됩니다.
print는 다트의 내장함수이며 콘솔에 글자를 나오게 합니다.
간단하게 개발이 잘되고있는지 확인할때씁니다.
위 상황같은 경우 Text위젯을 눌렀는데 넘어가지않는 경우가 있다면,
Navigator 라고 적힌 부분이 문제가 있는건지 아니면 onTab 전체가 문제가 있는건지 확인을 해야하는데,
print() 함수가 잘 실행된다면 적어도 onTab 은 정상적으로 작동된다고 판단을 할수가 있는겁니다.
사실 이렇게 간단하게 할때 디버그 용으로 쓰지만, 좀 복잡하게 할때는 디버깅 이라는걸 사용합니다.
8.Image 사용하기
이미지 사용하는 방법을 알아보겠습니다.
이미지를 사용하는 방식은 크게 두가지로 어셋이미지 사용 , 네트워크 이미지 사용 입니다
어셋이미지는 우리가 만드는 프로젝트 안에 자주쓰는 이미지를 넣어두고 사용하는 방법이고
네트워크 이미지 는 인터넷에 올라가있는 이미지의 주소를 불러와 사용하는 방법입니다.
먼저 어셋이미지를 사용하는 방법을 알아보겠습니다.
프로젝트 최상단 폴더에 마우스 오른쪽을 눌러 폴더 를 생성해줍니다.
이름은 아무거나 지어도 되지만 보통 asset을 사용하기 위한 폴더이름을 assets라고 짓습니다.
assets 에는 앱내부에서 가지고있는 이미지나 파일 등등이 들어갈겁니다. (asset = 앱의 자산 정도로 생각하면 되려나요)
그리고 assets내부에 images라고 폴더이름을 짓습니다. 이미지를 모아두는 폴더인데 아무거나 지어도 되지만 보통 images 라고 짓습니다.
그뒤 인터넷에서 사과와 바나나 이미지를 아무거나 받아주고, 그것을 images 폴더안에 집어 넣습니다.
asset 을 사용하기위해서는 어떤걸 사용한다고 지정을 해줘야하는데요
pubspec.yaml 파일을 열어서 , 대략 62번줄 정도에 있는 assets 부분을 위처럼 적어줍니다.
처음엔 주석처리가 되어있을텐데 주석을 풀어주세요.
그리고 빨간줄에 맞게 라인을 잘 맞춰야합니다. yaml 파일은 라인을 중요시 여겨서 꼭 저 라인을 지켜주세요.
그리고 사용할 파일의 경로를 적어주면됩니다.
우리가 사용할 파일은
assets 폴더의 images안에 있으니
- assets/images/apple.webp
- assets/images/banana.jpeg
라고 적어주면됩니다.
그런데 만약 이미지가 100개라면 100개 작성하는데 시간을 들겁니다.
그래서 저는 - assets/images/ 라고 적었습니다.
이뜻은 assets 폴더내부의 images 폴더 내부의 모든 파일을 사용하겠다는 뜻입니다.
여기서 주요할점은 images 뒤에 / 이거를 꼭 붙여줘야합니다.
그뒤 우측상단에 있는 Pub get 을 눌러주세요.
이렇게 하면 이미지를 사용하기 위한 준비가 되었습니다.
FruitPage.dart 로 가서 사과 라고 적힌 Text위젯아래에 이미지 위젯을 넣습니다.
방법은 Image.asset('이미지 주소') 이렇게 넣으면됩니다.
그러면 이미지가 나오게 됩니다.
(나중에 컬럼위젯 에서 설명하겠지만, 지금 보이는 이미지의 원본 사이즈는 가로740px * 세로 559px 입니다.
에뮬레이터의 가로길이는 기껏해야 400언저리 일텐데 740보다 작으니 사진이 짤려야하는데 안짤리고있습니다.
그 이유는 Column 위젯의 세로 최대길이는 부모의 세로길이 또는 하부 children 들의 총 세로길이 값이고 , 가로길이는 하부 children 중에 가장 가로길이가 긴것의 사이즈를 따르는데, 가로의 Max는 부모의 가로사이즈를 따릅니다.
여기서 부모는 Scaffold 이고 가로가 에뮬레이터 사이즈니, 결국 Column 의 가로 길이는 에뮬레이터 사이즈가 됩니다.
그리고 Column 내부의 children 들은 가로사이즈가 아무리 커도 Column 의 가로사이즈안에 있게 됩니다.
그래서 저 이미지의 가로는 에뮬레이터 가로사이즈를 넘을수없는데 , 나중에 하겠지만 Image.assets 의 Boxfit 맞게 되면서 자동적으로 세로값도 조율되게 되었습니다. 이때의 Boxfit 은 contain 인데 아무것도 안적어도 디폴드 값이 contain이라서 저렇게 되었습니다.)
이미지 사이즈를 좀 작게 해보겠습니다.
width :를 100을 주니 이미지가 작아졌습니다.
아울러 컬럼의 가로사이즈도 children 중 가장 가로길이가 긴 위젯의 사이즈에 맞춰진 것을 볼수있습니다.
참고로 하늘색 가이드 라인을 보고싶다면 우측의 Flutter Perfomance 탭을 누른뒤 Debug paint 버튼을 눌러주세요.
바나나 그림도 한번 넣어보세요.
width 를 200 으로 맞추면 역시 Column 의 가로사이즈가 200이 된것을 볼수있습니다. 그이유는 Column 의 children 중에 가로길이가 가장긴것이 바나나 이미지 위젯으로 200의 가로사이즈를 가지고 있기 때문이죠.
이번엔 인터넷에서 이미지를 가져오겠습니다.
Image.network('이미지 주소') 이렇게 하면됩니다.
아무 그림이나 들고오면되는데 , 픽사베이(https://pixabay.com/ko/) 를 이용하면 샘플이미지를 많이 얻을수있습니다.
중요한점은 http 가 아닌 https 형태의 주소를 넣어야합니다. http 도 되는데 이건 따로 설정을 해줘야되서 그냥 https 를 가져오도록 합니다.
(그리고 세로가 긴거를 들고오면 size overflow 에러가 발생할수있으니 이건 나중에 다룰거라 원활한 진행을 위해 가로가 더 긴 그림을 들고와주세요)
9.Column 정렬
지금 Column 안에 chidren 들이 세로 정렬 + 가운데 정렬 되어있는것이 보일것입니다.
Column 이든 Row든 레이아웃 위젯에는 축이 있는데요
mainAxis 와 CrossAxis 입니다.
Column은 위젯들을 세로 방향으로 정렬하기때문에
mainAxis(메인축) 은 세로방향
crossAxis(교차축)은 가로방향입니다.
시각적으로 예시를 잘보기위해 마지막 인터넷에서 받은 이미지의 사이지를 조절하여 작게 만들었습니다.
Column 의 mainAxisAlignment 옵션에 MainAxisAlignment.start 를 주세요.
이렇게 하면 처음과 변화가 없어보입니다.
그이유는 mainAxisAlignmen의 디폴드 값이 MainAxisAlignment.start 이기때문에 옵션을 안넣어도 적용되기 때문입니다.
center 로 바꾸니 Column 내부의 children 들이 가온데로 왔습니다. end 는 제일 아래로 갈것입니다. 직접한번 해보시길 바랍니다.
spaceBetween 으로 하니, chidren의 첫 위젯이 가장 상단에 붙고 , 마지막위젯이 가장 하단에 붙었습니다.
그리고 나머지 공간이 균일하게 여백이 들어갔습니다.
start,
end,
center,
spaceBetween,
spaceAround,
spaceEvenly,
이렇게 6종류가 있네요. 하나하나 확인해보시길 바랍니다.
crossAxisAlignment 도 한번 확인해보시길 바랍니다.
start,
end,
center,
stretch,
baseline,
이렇게 있네요.
10.Row
인터넷에서 받아온 이미지를 여러개 가로로 배열해보겠습니다.
Row 위젯을 생성하고 children 에 이미지 두개를 두었습니다.
이미지 3개를 두어도 마찬가지일 것입니다.
Row 위젯도 mainAxis 와 crossAxis 가 있는데, Column 위젯과 반대로 mainAxis 가 가로방향이 될것입니다.
11.SizedBox
이미지 사이가 너무 붙어있는것 같아서 이미지 사이에 가로길이 30만큼의 빈상자를 넣었습니다.
SizedBox는 가로 , 세로 사이즈만 있는 빈 상자느낌의 레이아웃 위젯입니다.
가로여백을 줄때 width 옵션을 썻으니, 세로여백을 줄때는 height 를 주면될것입니다. 경우에 따라 width와 height 둘다쓸때도 있을것입니다. 플러터에서 여백을 주는방법은 패딩 , 마진 등등 많은데 저는 SizedBox를 많이씁니다. 저뿐만아니라 개발중 아주 많이 쓰이는 위젯이니 알아두도록 합니다.
12.overflow
이미지 옵션의 width 를 빼면 , 원래 사이즈가 나오게 됩니다.
Row 위젯의 가로사이즈는 chidren 의 가로길이를 모두 합한만큼입니다. 근데 그 길이의 합이 에뮬레이터 기기의 가로사이즈를 넘어가면
overflow 에러가 나오게됩니다.
이 에러를 해결하는 방법은 이미지를 작게 하던지 , 전체길이가 에뮬레이터 가로사이즈에 맞아지도록 조율하던지 , 스크롤 기능을 넣든지 입니다.
이미지를 작게 하는건 이미 해봤으니 에뮬레이터 가로사이즈에 맞아지도록 조율을 해보겠습니다.
13.Expended
Expanded 위젯으로 이미지 위젯을 감싸주었습니다.
이 뜻은 Row위젯의 children 중에 Expanded가 적용되지 않은 위젯이 Row위젯의 공간을 먼저 차지하고, 나머지 공간을 Expanded가 붙은 위젯이 비율만큼 나눠가지는것입니다. 여기서 비율을 설정안햇으니 디폴트 값인 1식 차지해서 사진두개가 같은 가로사이즈를 가지게 되었습니다.
1:2 의 비율로 사이즈를 가져가고 싶다면 flex값을 주면됩니다.
예를들어 Row의 가로사이즈가 330 이라고 가정하면 여기서 Expanded가 안붙은 위젯의 가로길이 30을 제외하면 300입니다.
이것을 1:2 로 나누니까 가로길이가 100 : 200 이 될 것입니다.
14.라이브러리 사용
5.페이지 넘어가기 에서 우리는 페이지를 넘어가기위해 이런 길고 직관적이지 않은 코드를 사용했습니다.
그런데 라이브러리를 써서 좀더 쉬운코드를 작성해서 같은 결과를 얻어 낼수있습니다.
Flutter 에서 기본제공하는 기능을 보충하거나 , Flutter에서 제공하지 않는 기능을 누군가가 개발해둔게 있다면 다운받아서 손쉽게 사용할수있도록 만든 것을 라이브러리 라고합니다. 우리는 개발하면서 수많은 라이브러리를 사용하게 될 것입니다.
구글에 pub.dev 를 쳐서들어오거나 주소창에 pub.dev 를 쳐서 사이트에 들어옵니다.
이 사이트는 다트 플러터 라이브러리가 있는 곳입니다.
검색어에 get 이라고 쳐보세요.
검색결과 get 이라는 목록이 보이고 좋아요가 무려 12,563 입니다.
우리가 처음 사용할 라이브러리는 getX 라는 매우 유명한 라이브러리 입니다. 패키지명은 get이네요.
getX 는 네비게이션 , 상태관리 , 스넥바 등등 여러가지 기능을 제공합니다.
(이중에서 지금은 네비게이션 기능을 사용할것이고 나중에는 다른기능도 써볼것입니다.)
Installing 탭으로 넘어와서 get: ^4.6.5 부분을 복사합니다.
pubspec.yaml 파일을 열어서 대략 30번째줄에 dependencies 라고 보일것입니다.
이 아래에 줄을 맞춰 라이브러리들을 뭐쓸지 적어두면됩니다.
이렇게 적는다고 라이브러리가 설치되는건 아니고 , 이건 뭐쓸지 적어두는 노트 같은 겁니다.
우측상단의 Pub get 을 눌러주세요.
.dart 파일로 오면 Pubspec has been edited 라는 알림이 오게되는데
여기서 Get dependencies 를 누릅니다.
안뜰경우도 있는데 안떠서 안눌러도 에러안생기니 걱정하지마세요
설치가 된 라이브러리는 External Libraries 라는곳으로 가게됩니다.
설치한게 없는데 저렇게 많이 보이는이유는 , 플러터가 기본적으로 설치해놓는것도 있고 , getX라이브러리도 다른라이브러리를 참조하는 경우가 있으니 그거까지 다깔려서 저렇게 많아지는것입니다.
이 External Libraries 폴더는 크기가 매우 크기때문에 , 나중에 GitHub 라는곳에 우리 소스코드를 올릴때 저건 올리지 않습니다.
대신 어떤 라이브러리를 다운받을지에 대한 내용이 적혀있는 pubspec.yaml 파일만 올려두고, 그 이후에 내용대로 라이브러리를 다운받아서 개발하게 됩니다.
node.js 를 해보신 분이라면 package.json 과 같은 파일이라고 생각하시면됩니다.
pubspec.lock 이라는 파일도있는데 , pubspec.yaml 파일에 적어둔내용을 바탕으로 확정적인 내용으로 pubspec.lock 파일이 만들어지는데 , 결국 lock 파일 기준으로 패키지를 설치하게 되는 것입니다.
복잡하니 일단 넘어가도록합니다.
HelloPage.dart 파일로 와서
페이지 넘어가는 쪽 함수에
Get.to(()=>FruitPage());
라고 적어줍니다.
Get 이라는 라이브러리를 사용하기위해 import 해줍니다.
그리고 예전에 적었던 페이지 넘어가는 함수는 삭제해주세요.
다음페이지로 넘어가기를 눌렀더니
오류가 납니다.
console 의 run 부문을 보니 "넘어갑니다" 라는 건 잘뜨는걸봐서 버튼은 문제가 아닌거 같네요.
아래 오류메세지를 읽어보니 MaterialApp을 GetMaterialApp으로 바꾸라고 나와있습니다.
main.dart 의 MaterialApp 을 GetMaterialApp으로 바꿔줍니다.
import도 해주시고요.
그럼 잘 작동합니다.
라이브러리 마다 따로 설정을 요구하는게 있는데 , 그걸 어떻게 아느냐?
Readme 에 아래쪽에 보면 이걸사용하기위해서는 이렇게 해라 라는 설명들이 나와있습니다.
다른 라이브러리를 사용할때 그냥 사용하는거면 상관없는데 , 이렇게 어떤 설정을해줘야 하는상황이면 Readme에 나와있으니 잘 읽어보시길 바랍니다.
15.페이지 넘어갈때 파라메터 주기
이번에 할것은 사과를 눌렀을때는 사과 상세페이지 , 바나나를 눌렀을때는 바나나 상세페이지로 가는것을 해볼것입니다.
그런데 사과 상세페이지 랑 바나나 상세페이지는 안에 세부 내용만 다를뿐 같은 페이지 입니다.
사과 , 바나나 이렇게 2개만있어서 다행이지 100개가 된다고 100페이지 만들면 안되겠죠?
page 에 FruitDetailPage.dart 파일을 만들어 주었습니다.
그리고 이 FruitDetail 이라는 클래스에 지정된 멤버변수로
fruitName , fruitImagePath , detail 을 선언하였습니다.
그리고 빨간색으로 표시한 생성자 라는것을 통해서 이 클래스의 인스턴스를 생성합니다.
말이좀 갑자기 어려워진 느낌이 있는데요. (접은글로 표시해둘테니 더보기 해서 보실분만 보시길)
예를들어 사람 이라는 클래스가 있다고합시다
class Person 이정도겠죠
그럼 Person은 이름 나이 그런것들을 가집니다. 이름,나이 이런걸 멤버변수라고 하고, 그걸 표현하면
이렇게 될 것 입니다.
그런데 22세 철수라는 사람도 있고 30세 영희라는 사람도있고 많은 사람이 있을것입니다.
그것을 매개변수라는 것을 토대로 하나하나 만들어주는것을 생성자 라고합니다. 그리고 생성자를 통해 생성된 한사람의 객체가 인스턴스라고 하는것입니다.
철수라는 사람을 만들땐 사람생성함수(철수 , 22세) 이런식으로, 영희라는 사람을만들땐 사람생성함수(30세,영희) 뭐 이런식으로 만들고 싶을텐데
예시에서 본것처럼 사람생성 이라는 메소드를 썼는데 이런매소드 이름도 안지었고, 이름과 나이를 어떻게 넣는지 규칙이 없으니 그냥 아무렇게나 넣어줬던것이었습니다. 그래서 이 규칙을 만들겁니다.
이렇게 하면 사람생성함수의 이름이 Person() 이 됩니다. 그리고 첫번째는 name , 두번째로는 age 로 오게 해줬습니다.
만약 순서를 신경쓰고 싶지 않다면 중괄호를 써서 { 내용 } 이런식으로 넣으면 됩니다.
이렇게 중괄호를 쓰면 , 순서상관없이 옵션명을 넣은뒤 그 옵션명에 맞게 값을 입력하면됩니다.
이런것을 NamedParameter 라고합니다.
여기서 this 는 클래스 자체를 가르치는 말입니다. 그래서 this.name 하면 String name; 이부분을 가르치게되겠죠.
그래서 Person() 이라는 생성자 함수로 들어오게되면 class 내부의 name과 age 를 찾지하게되면서 하나의 Person 인스턴스가 생성되는것입니다.
그래서 22세 철수를 만드려면 Person(name:"철수" ,age: "22세") 이렇게 하면됩니다.
requird 는 필수값이라는 뜻입니다.
String? detail에서 "?" 물음표는 있어도되고 없어도 된다는 뜻입니다. 명칭으로는 null able 하다고 합니다. null 값을 허용한다는 뜻이죠.
Text(detail??"") 이뜻은 detail 을 넣되 detail이 null 이면 "" 을 넣으라는 뜻입니다.
FruitPage.dart 로 넘어와서 Text("사과") 부분을 GestureDetector 로 감싸주세요.
그리고 페이지 넘어가는 함수를 작성해주세요.
그리고 저 페이지를 생성하는 생성자 함수를 적은뒤 fruitName 옵션과 fruitImagePath 옵션부분을 채워줍니다.
바나나 쪽에서는 detail 부분도 적어줍니다.
우리가 FruitDetailPage 클래스를 만들때 fruitName과 fruitImagePath 는 필수로 줬지만 detail 은 null able 하게 주었기때문에 이부분을 쓰든 안쓰든 상관이 없습니다.
그래서 사과를 누르면 사과페이지 , 바나나를 누르면 바나나 페이지로 가게되었습니다.
근데 그림을 눌러도 아무반응이 없어요 할수있는데, 우리가 GestureDetector 위젯을 Text위젯에 적용했기때문입니다.
16.문자열보간
AppBar 의 Text 부분을 Text(fruitName +"페이지") 라고해보면 사과+페이지 가 되어 사과페이지 라고 나오게됩니다.
변수와 문자열을 합칠때 + 를 이용해도되지만 ${변수명} 을쓰면 문자열 사이에 집어넣을수있습니다.
17.toString
price 라는 int 타입의 변수를 추가하였습니다.
아래 텍스트 위젯에 사용해보니 텍스트위젯에는 String 타입만 들어갈수있다고 나옵니다. 그래서 int 를 string 으로 변환해줄필요가 있습니다.
price.toString() 이라고하면 int타입의 변수인 price 가 string 타입으로 바뀌게됩니다.
또는 " " 안에 문자열 보간을 사용해도됩니다.
새로운 required 매개변수(파라메터) 가 생겼으니 추가 코딩해줍니다.
18.문자 스타일
3000 이라는 글자가 너무작고 안보여서 문자 스타일을 좀 바꿔보겠습니다.
Text 위젯에 style 이라는 옵션을 주고 style이라는 옵션은 TextStyle위젯을 받는다고 나옵니다.
그리고 TextStyle위젯은 여러가지 옵션을 가지고 있네요.
여기서 사이즈와 컬러만 바꿔봅니다.
그럼 이렇게 스타일이 바뀐것을 확인할수있습니다.
폰트 굵기와 등등 여러가지 옵션들이 있으니 차차 하나씩 써보도록 합시다.
19.패딩
ddd
이미지 부분이 너무 답답해서 여백을 좀 줘보겠습니다.
Container 로 감싸고 padding 옵션을 주었습니다.
EdgeInserts 라는 flutter에서 제공하는 클래스를 사용하는데 패딩이나 마진줄때 EdgeInserts 라는 클래스(위젯이아님) 를 사용해야합니다.
뭔지모르겠지만 EdgeInserts.symmetric 이라고 한다음 안에 horizontal 과 vertical 에 값을 줍니다.
horizontal 은 수평방향의 여백이니 좌우여백 , veritcal은 상하 여백입니다.
예시에서는 수평,수직 둘다줬는데 하나만 줘도 됩니다.
그리고 좌측 여백만 주고싶다거나 , 하나하나 지정하고 싶으면 EdgeInserts.only 를 사용하면 됩니다.
패딩과 마진이 해깔릴수있는데 초록 상자가 우리가 만든 Container 라고 한다면 Container 안쪽여백이 패딩 바깥쪽 여백이 마진입니다.
우리가 컨테이너의 padding 옵션만 사용하는거라면 Container 대신 Padding 위젯이 따로있으니 이걸사용하면 됩니다.
포켓몬 빵안에 스티커만 필요한데 전체빵까지 살필요가 없는 것 마냥요.
20.컨테이너 꾸미기
컨테이너는 몇가지 옵션들을 가지고 있는데, 그중에 margin과 decoration 을 써보았습니다.
decoration 은 일종의 상자를 예쁘게 꾸미기 정도라고 생각하면됩니다.
옵션들이 여러개있으니 한번 시도해보시고 , google 이나 chatGPT에 flutter container decoration 이라고 치면 여러가지 방법들이 나오니 참고하면됩니다.
그리고 1강에서부터 이정도만 알고 그냥 넘어가면 된다는 표현을 제가 하고있는데
코딩을 하다보면 A를 알기위해서는 B를 알아야하고 B를 알려면 C를 알아야하는 C를 알려면 A를 알아야하는 아이러니한 상황이 많이 발생합니다.
그래서 B와 C를 모르는 상태에서 A를 완벽하게 이해하는것은 힘든일이고 시간낭비하는 길입니다.
그래서 A와 B와 C의 퍼즐 조각들을 하나하나씩 모아나가다 보면 어느새 퍼즐의 연관 관계들을 알게되고 이해하는것이 더 쉬울것입니다. 지금은 아무 퍼즐조각도 없으니 알수있는것만 알고 빠르게 다음으로 넘어가는게 중요하다고 봅니다.
Homework
이번 강의부터 숙제가 있습니다.
1,2 강에서 배운걸 토대로 복습하는 개념으로 만들어 보시길 바랍니다.
그리고 이 숙제를 기반으로 3강이 진행되니 꼭 해보시길 바래요.
상품리스트가 나오고 그걸눌렀을때 상세 페이지로 가게 하면됩니다.
강의에서 안배운 부분을 구현해주셔야할부분은
1. 메인페이지의 appbar 색상 바꾸기 - hint keyword : backgroudColor
2. 메인페이지의 appbar 의 제목이 중앙으로오기 - hint keyword : centerTitle
3. 메인페이지의 상품 사진 사이즈 비율을 가로:세로 2:1로 하기 - hint keyword : AspectRatio
구현하는 방법과 코드는 재각각일수있지만 어떻게든 구현하시면 됩니다.
이 숙제를 하면 문제점들이 발견되는데, 그 문제점 해결을 위해 다음 강의에서 다룰 내용중에 컴포넌트 모듈만들기 , Vo 만들기 , 그리드뷰 가 포함됩니다.
'코딩생초보를 위한 플러터 빠르게 한바퀴' 카테고리의 다른 글
| 6.network (0) | 2023.08.22 |
|---|---|
| 5.state management (0) | 2023.08.11 |
| 4.Json (0) | 2023.08.09 |
| 3.component (0) | 2023.08.03 |
| 1. create project (0) | 2023.07.29 |
