기본 위젯 4개를 배웠는데, 기본부터 어려워서 슬픔

환경 세팅했을 때처럼 코딩애플로 1강 시작...
 
오늘의 차례,,

1. 프로젝트 생성, 기본 세팅
   1. Lint 끄기
   2. 메인에서 stless 입력
2. 기본 위젯 4개 쓰는 법
   1. Text()
   2. Icon()
   3. Image.asset('')
   4. Container() or SizedBox()
3. 근데 코딩애플은 나처럼 완전 초보자가 이해하기엔 어려울 수 있다고 함 엉엉

---

1. 프로젝트 생성

Project 이름을 숫자로만 하려니까 유효한 Dart Package Name이 아니라면서 lower case를 쓰라고 했다.
test20230823으로 하니까 바로 생성됨;

암튼 main.dart가 메인페이지라고 한다. 이걸 메인으로 생각하면 된다.

 

1-1. Lint 끄기

test/analysis_options.yaml로 들어가서 rules: 라고 적힌 부분을 찾고 4줄을 입력하라고 했다.
Lint라는 걸 잠깐 끄는 용도라는데, Lint가 머여... 검색...

린트는 코드의 오류나 버그 등을 미리 점검하기 위해 사용하는 툴입니다. 린트(Lint) 또는 린터(Linter)라고 불리웁니다.
오타에 대해서 빨간 줄이나 어떤 표시로 알려주게 됩니다.
https://coconuts.tistory.com/738

아항!!!!
맞춤법 검사 자동으로 해줘서 맨날 노션이랑 구글독스랑 한글 등등에도 빨간줄 나오는 그런거구낭
 

1-2. 메인에서 stless 입력

다시 메인으로 돌아가서 void main() {} 밑은 다 지우라고 함.
구글이 이해를 돕기 위해 간단한 프로젝트를 써놓은 것 뿐이라며 개쓸데 없다고 함 ㅋㅋㅋㅋ
아, 저 Tab을 더블 클릭 하면 왼쪽 사이드 메뉴가 닫히고 열리는 데 좋당.,..
은 멍청하게도 맨 왼쪽에 세로로 위치한 Project Tab을 나중에야 알아챔ㅋㅋㅋ

stless 입력 → Tab 키 → 뭔가 긴 코드가 자동으로 작성됨 !!!! 꺅
이때 따로 마우스를 다른 곳에 클릭하지 말고(Focus Out 되지 않게) MyApp이라고 입력하면 밑에 첨부한 이미지처럼 됨.

 

근데 stless가 뭣이어요...?
찾아보니까 단축키라고 한다... 어렵네 ㅎ
 
 
 
 
 
 
 
 
 
 
 
 
 
 

근데 바로 난관 봉착,,, 이거 왜 다르냐...?.......????
코딩애플에서는 맨 밑줄의 return Container에서 Container부분을 MaterialApp으로 바꿔서 입력하라고 했는데,
나는 return Container가 아니라 return const Placeholder로 되어있었다.
return const가 또 먼뜻인데... 검색... '상수화' 하겠다는 의미라고 한다.
... 갑자기 또 뭘 상수화 하는데... 엉엉
개발자 E님 소환....했더니 본인도 지금 그렇게 된다며 Android Studio 버전이 업뎃돼서 그럴 수도 있다는 얘길 해주셨당...
그럼 걍 수동으로 저거 똑같이 쓰면 되냐고 하니까 답변 ㅇㅇ 받음!!!!
 

그럼 이렇게 된당. Enter 치고 home: 입력 해줘야함

 

2. 기본 위젯 4개 쓰는 법

Flutter에서 디자인을 넣는 법은 여러 '위젯'을 짜깁기하는 것이라고 한다.
그래서 꼭 알아야 할 위젯 4가지가 있는데 글자, 아이콘, 이미지, 네모박스!
 

1. 글자 위젯

Text('안녕')

home: Text('안녕') 요렇게 입력하면 화면에 안녕이란 글자가 표시된다.
나는 macOS에서 하니까 Chrome 브라우저와 iOS Simulator를 선택해서 미리보기 할 수 있다.
 
신기해... 신기하다곡!!!!!!!
 
 
 
 
 
 
 
 
 
 
 
 

2. 아이콘 위젯

Icon(Icons.star)

아이콘은 플러터에서 기본으로 갖고있는 아이콘 이름을 그대로 쓰면 된다고 한다.
예시는 'star' 아이콘을 불러오도록 이름을 써준 것.
오 리액트 Material UI 했던 거랑 비슷한가보구낭.
이렇게 하면 화면에 검은 별 하나가 정중앙에 띡 보인다.
 

3. 이미지 위젯...이 제일 복잡했다.

일단 이미지를 넣으려면
1) 프로젝트 폴더 안에 사용하고 싶은 이미지가 존재해야 한다.
2) 이미지 쓰겠다고 등록도 해야 한다 ;;
3) Image.asset('폴더이름/이미지파일이름')을 메인에 적어준다.
 

에셋을 보관하는 폴더를 프로젝트 안에 새로 만들어야 하니까
가장 상위에 있는 프로젝트 이름에 커서를 두고, 우클릭, 디렉토리를 클릭해서 생성한다.

이때 정중앙에 디렉토리 이름 뭘로 할거냐는 팝업이 뜨는데,
코딩애플 강의에서는 assets로 정하라고 해서 똑같이 했다. 그리고 Enter.

그럼 이렇게 새로 디렉토리가 생기고 포커스된다.

이렇게 원하는 파일을 직접 새로 만든 assets 폴더에 드래그해서 넣으면 됨!!!!

이제 pubspec.yaml 파일에 들어간다.
코딩애플에서 가르쳐준 바로는 앱 만들 때 필요한 모든 자료를 정리한 파일이라고 생각하면 된다고 한다.
외부 패키지나 라이브러리도 기록된다(??)고 한다.
 

flutter:
  assets:
    - assets/

밑으로 좀 내리면 54행에 flutter:라고만 쓰여있는 부분이 나온다.
여기서 Enter, 방금 전에 새로 만든 assets이라는 디렉토리를 사용하겠다는 내용을 명시해준다.
이렇게 두 줄을 더 써주면 assets 폴더 안에 있는 모든 이미지 파일들을 다 가져다 쓸 수 있다고 한다. ㅇㅅㅇ
Command + S로 저장 잊지 말고 누른 후, main으로 돌아가기.
 

Image.asset('assets/fan2.png')

코딩애플에서는 dog라는 이미지를 등록했기 때문에 저렇게 쓰여있다.
assets 파일에 있는 dog 이미지를 가져온다는 뜻.
나도 팬2.png 이미지를 가져와 디렉토리에 첨부해두고, assets/팬2.png라고 입력했더니 에러가 났다.
어... 설마 한글이라서 그런가...? 싶어서 파일을 Finder에서 fan2로 바꾼 뒤,
Android Studio로 돌아와 assets/fan2.png을 입력하니까 정상적으로 이미지가 표시됐다!
개발자 E님한테 물어보니까 인코딩 문제 때문인 것 같다구 하셨다.
어... 인코딩 뜻은.... 검색...

어.. 글쿠나... ㅎㅎ 암튼 한글로 하면 안된다.
 

4. 네모박스 위젯은 Container 또는 SizedBox

Container('')

SizedBox('')

코딩애플에서 2가지 방법을 가르쳐줬는데, Container를 예시로 설명해주셔서 그대로 따라했다.
저렇게만 쓰면 미리보기 해봤자 아무것도 안보인다. 투명한 박스가 그려져서라고 한다. 그래서 스타일을 줘야 한다.

Container( width: 50, height: 50, color: Colors.blue )

스타일은 괄호 안에 이렇게 지정하면 되는데, 가로폭/세로높이/컬러를 예시로 따라했다.
컬러는 Colors라는 단축키가 또 있길래 신기했다.
근데 이렇게 해놓고 미리보기 돌리면 온 화면이 다 시퍼렇게 나온다. 엥... 사각형이 아닌디요.
근데 이건 저 50으로 지정해둔 것의 단위가 그냥 px이 아니라서라고 한다.
그리고 기준점이 없어서라고... 암튼 단위부터 얘기해보자면 LP를 쓴다고 하는데.

LP...요...? 50LP==1.2cm라는데 일단 잘 모르겠고요... LP 또 검색...
어... Logical Pixel이란 말의 줄임말이었구나... 일단 ㅇㅋ...

LP는 Logical Pixel 이다.
px로 넣지 않는 이유는 기기마다 픽셀의 절대적인 크기가 다르기 때문이라고 한다.
LP는 cm,inch 이런 단위랑 유사하게 그냥 현실에서 쓰이는 단위와 비슷하다. 눈에 보이는 절대적 수치이다.
38LP => 1cm, width:50 => 약 1.2 cm 
https://codingclimber.tistory.com/78

 

와 이게 또 뭐냐.
Center() 는 내 자식 위젯의 기준점을 정중앙으로 해달라는 위젯이라고 한다...
암튼 따라해본다...
 

코딩애플 화면. Center 사용하면 우측처럼 정중앙에 파란 상자가 나올 거라고 했당

내꺼...

엔터도 잘 쳐야 하는구나… 분명 똑같이 했는데 밑에 회색 글자가 뭔가 //Center과 //MaterialApp 두개로 안나오고 합쳐서 나왔는데... 머 별거 없겠지 하고 미리보기 실행하니까 에러 뜸…ㅋㅋㅋㅋㅋㅋㅋ
앗! 쉼표가 없어서 그런가? 하고 추가했는데 그것도 안됨ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
 
잠시 빡침을 삼키고 첨부터 Center() 괄호 사이에서 엔터 누르니까 두개로 잘 나옴..
child라고 적었을 때도 child: , 으로 자동완성이 정상적으로 나옴…
왜,,? 아까 왜 안된 건데.? .. ? ? ?..
에라이 퉤
 

child를 '파라미터를 넣어준다'고 표현하시구 있다.

정상적으로 네모 나오는거 기쁜데 왼쪽에 파란 상자가 뜨길래 뭔가 해서 눌러보니까 색상 지정임 와우…
근데 클릭해도 컬러가 바뀌어 적용되지는 않음.
멀까. … . .. .
나중에 알게 되겠지…  ?.. . . ?

어쩄든 여차저차 기본위젯 따라하기 완료... :)