플러터(flutter) 순한맛 강좌 10 | 캐릭터 페이지 디자인 2: 실전코딩 part 1

이번 시간에는 본격적으로 플러터(flutter) 캐릭터 앱페이지 디자인을 시작합니다. 플러터(flutter) 입문자로써 여러 위젯(widget)의 쓰임새와 활용도를 학습하고 익히기에 아주 좋은 연습이 될 것입니다. 완결편인 part 2는 이번주 목요일에 업데이트됩니다.
Music licence:
Song - Alex Nekita - Child's play
Follow Artist : / alexnekita
Music promoted by DayDreamSound : • Video

[@hunjo8914]

차분하게 정주행하고 있습니다. 친절한 강의 정말 감사드립니다.

[@HeonChang]

초보자flutter 명강의 입니다. 외국강의 보다 100배 좋아요.

[@codingchef]

과분한 칭찬 감사합니다. 곧 이어질 조금 매운 맛 강좌도 기대해주시구요, 항상 좋은 강좌를 만들기 위해서 노력하겠습니다.

[@dearjunolee]

이런 보배같은 강의를 이제서야 발견한게 너무 아쉽네요. 나이 50 넘어서 코딩을 새로운 취미로 삼고싶어 공부중인데 선생님께서 offline강의도 하신다면 바로 달려가고픈 심정입니다. 감사하고 또 감사드립니다.

[@codingchef]

과분한 평가 감사드립니다. 저도 보다 좋은 플러터 강좌를 위해서 노력하겠습니다.

[@jeontaesung]

자바로 어플공부하다가 너무 어려워서 플러터로 넘어왔는데 하나하나 잘 알려주셔서 감사합니다! 하루만에 여기까지 왔네요. 앞으로도 좋은 강의 부탁드립니다!

[@codingchef]

반갑습니다. 학습하시다가 궁금한 점이 생기시면 언제라도 알려주세요. 보다 더 좋은 강의를 위해서 노력하겠습니다.^^

[@다랑어-j1k]

너무 감사합니다...ㅠㅠ 덕분에 플러터에 대해 조금씩 이해하고 배워가고 있습니다. 제가 해드릴 수 있는게 없지만 만약에 광고 다시면 꼭 스킵 안 하고 다 보겠습니다!! 평생 복 받으세요!!

[@codingchef]

말씀만이라도 감사합니다. 학습하시다가 궁금한 점들이 생기면 언제라도 알려주시기 바랍니다~^^

[@makeurday2]

실타래처럼 얽혀있던 머릿속이 하나둘씩 풀려가는 느낌입니다.. 진짜 너무나 큰 도움을 받고 있어요ㅠㅠ 우리 셰프님 적게 일하시고 돈 많이 버셨으면 좋겠습니다!!ㅎㅎ

[@codingchef]

감사합니다. ^^;

[@chris77kjh]

선생님 덕분에 기초부터 개념이 팍팍 들어와요..정말 구세주같으신 분..

[@codingchef]

감사합니다. ^^;

[@applezrock]

플러터를 어떻게 공부할까 고민이 많았는데 큰 도움이 되었습니다. 순한맛 시즌1 완강까지 열심히 달려볼게요. 감사합니다!

[@_interrobang]

강의 너무 재미있게 잘 들었습니다. 강의가 재밌는건지 플러터가 재밌는건지 헷갈려요 ^^

[@leedaniel4522]

지금 코로나 격리중인데 이 강좌로 무료한 시간을 알차게 보내고 있습니다. ^^ 정말 좋아요!

[@codingchef]

어서 격리가 끝나길 바라겠습니다. 조만간 다시 강좌들을 업데이트 할 예정이니 관심부탁드려요~

[@Trader-r1d]

코딩 셰프님 정말 잘 보고있습니다. 질문이 있습니다. 제가 군대에서 flutter 로 코딩을 하는중인데 앱을 실행해보고자 할때 emulator 를 쓰면 노트북이 너무 느려서 인터넷이나 online에서 실행하는 법은 없을까요? Dartpad 에서 실행하면 단순한 화면은 ui로 표시가 되는데, import가 많아지거나 그러면 인식을 못하는거같아서 여쭙습니다. !!

[@codingchef]

가장 좋은 방법은 안드로이드폰이나 아이폰을 에뮬레이터로 사용하는 것입니다. 가령 삼성폰이면 해당폰의 드라이버를 검색해서 다운로드한 후 설치하면 안드로이드 스튜디오에서 폰을 읽을 수 있으므로 직접 만든 flutter 앱을 설치할 수 있습니다.

[@Trader-r1d]

코딩셰프 감사합니다 ㅠㅠ 제가 사용하는 폰이 아이폰인데 제 핸드폰으로 에뮬레이터를 사용하려면 노트북에 잭 연결하고 다른 프로그램을 깔아야하나요?

[@codingchef]

@@Trader-r1d 아이폰을 사용하려면 반드시 맥 환경이 필요합니다. 즉, 맥북 등에 아이폰을 연결해서 사용해야 한다는 의미입니다. 만약 일반 윈도우즈용 PC라면 아쉽지만 아이폰을 에뮬레이터로 쓸 수 없습니다..

[@mina-news]

이런 보화를 찾다니 감사합니다

[@codingchef]

보다 더 좋은 강좌를 만들기 위해서 항상 노력하겠습니다. 즐거운 주일 보내세요~^^

[@pdg9162]

최고예요. 스승님

[@ldh_code1860]

좋은 영상 감사합니다

[@minho1031]

padding을 넣을때 오른쪽은 0.0으로 한 이유가 있나요? 왼쪽에만 padding을 넣으니 사진을 센터에 뒀을 때 한쪽으로 쏠리게 됩니다. 오른쪽에 0.0을 넣은 이유와 만약 이유가 있으면 사진을 어떻게 화면 중앙으로 보낼 수 있는지 궁금합니다.

[@codingchef]

편의 상 padding 위젯의 모든 차일드에게 padding값을 부여하기 위해서 Padding 위젯을 사용한 것입니다. 그리고 LTRB속성은 어떤 요소에 두 가지 이상의 패딩값을 적용할 때 사용하기 좋습니다. 순한 맛 강좌 21번을 참고한 후에 이 문제를 한 번 고민해 보기 바랍니다. 댓글로 수정코드를 보여드리기가 어려울 뿐더러 조금만 고민해 보시면 이미지를 정중앙에 배치해 볼 수 있을 것입니다. 즉, CircleAvatar 위젯에는 패딩값을 적용하지 않으면 될 것입니다.

[@minho1031]

@@codingchef 고민해보겠습니다! 답변 감사합니다!!

[@hojinjeong3869]

앱바의 색상은 AppBar title의 BackgroundColor인데, MaterialApp title의 primarySwatch는 무슨 색상을 의미하는지 모르겠어요 ㅠ MaterialApp title이 앱명이라고 하셨던 것 같은데 ...

[@codingchef]

primarySwatch는 앱의 전체 기본 색상을 지정해 주는 것이라 보면 됩니다. 가령 앱바의 배경색을 따로 지정해 주지 않으면 primarySwatch에서 지정한 색상이 보여지게 됩니다.

[@최군자-u1j]

코딩셰프님 강좌 잘듣고있는 학생입니다. 감사합니다. 강의듣다가 궁금한 점이 생겼어요. 강의가 2019년꺼다보니 최근에는 조금씩 바뀐게 있더라구요. 요즘에 기본 프로젝트에서 위젯앞에 const라고 붙이라고 권유?추천?하던데요. 왜 이렇게 업데이트 된걸까요? flutter에서 추천하는대로 반드시 추가해주어야만 할까요? 근데 모든 위젯앞에 const를 붙이라고 추천하지도않더라구요. 이부분도 햇갈리더라구요...

[@codingchef]

다른 분 질문과 겹쳐서 같은 답변을 드리겠습니다. const는 우선은 앱을 더 안정적으로 컴파일 하기 위해 조치라고 이해하면 됩니다. 다만, 굳이 컴파일러가 불평하는대로 매번 const를 붙여줄 필요는 없습니다. pubspec.yaml파일로 가서 flutter_lints를 찾아서 앞에 #을 붙여서 코멘트 처리한 후 pub get을 눌러주면 const를 붙여주지 않아도 됩니다.

[@최군자-u1j]

@@codingchef 셰프님 명쾌한 답변 감사합니다. 덕분에 이해되었어요~~^~^ 컨텐츠 꾸준히 잘 보고있으니 계속 활동해주시면 감사하겠습니다 ^~^

[@gabojago77711]

저장이나 디버깅 누르면 자동 줄 맞춤이 돼서 불편하네요. 이 기능을 비활성화하는 방법이 있을까요? 저장을 눌러도 제가 코딩한 이 상태를 유지했으면 좋겠는데 셰프님이랑 다른 구성이 되어버려서 불편하네요.

[@codingchef]

자동정렬 기능을 사용하지 않으시려면 file->preferences->settings에서 editor라고 검색하신후 "editor.formatOnSave" 항목을 찾아서 체크가 되어 있으면 해제하시기 바랍니다.

[@gabojago77711]

@@codingchef 감사합니다!

[@최승연-i9p]

강좌 너무 감사드립니다!! 저는 amber에 마우스를 올리니 색상표가 나오지 않고 문구가 나오네요 안드로이드 스튜디오를 사용하고 있는데 색상표를 보면서 설정하는 방법을 알고싶습니다!

[@codingchef]

바쁜 일이 있어서 답변이 늦었네요. 이 부분은 dart가 업그레이드 되면서 더 이상 지원되지 않습니다. 아쉽지만 Colors. 까지 입력하면 색상들이 주욱 뜨는데 여기서 기본 색상을 확인해서 컬러를 지정할 수 있습니다.

[@최승연-i9p]

@@codingchef 답변 감사드립니다!! 처음시작하는데 덕분에 재밌게 공부하고 있습니다

[@funsimple7878]

안녕하세요? 강의 잘 듣고 있습니다. 정말 좋은 강의 감사드립니다. 안드로이드 스튜디오 보다 쉐프님께서 사용하시는 VSCode가 편하여 VSCode 사용 중 입니다.에뮬레이터가 연결은 되었는데 중간중간 저장 후 실행하려 하니 'Gradle task assembleDebug failed with exit code 1'라는 메시지가 나오고 에뮬레이터에 적용이 안되는데 어떻게 해야 하는지 검색도 해보고 하는데 적용이 안됩니다. 명쾌한 도움을 부탁 드립니다. 쉐프님!!

[@codingchef]

혹시 ./android/app/build.gradle에서compileSdkVersion을 확인해 보셨는지요?

[@funsimple7878]

@@codingchef 안녕하세요? 쉐프님~ 말씀해 주신 내용 확인했는데 compileSdkVersion28, minSdkVersion 16 , targetSdkVersion 28로 되어 있습니다. 버전이 낮아 안되는 거 같아 29로 변경해보았는데 현상은 동일합니다. 다시 한번 도움 부탁 드립니다!!

[@codingchef]

@@funsimple7878 이 증상은 여러가지 이유가 있어서 좀 더 구체적인 정보가 필요하긴 합니다.^^; 우선 compileSdkVersion, minSdkVersion ,targetSdkVersion 를 모두 28버전으로 수정하고 다시 실행해 보시고 안되시면, 터미널에서 flutter doctor, flutter clean, flutter packages pub cache clean 순서로 실행해 보시기 바랍니다.

[@funsimple7878]

@@codingchef 안드로이드 스튜디오에서 오류를 잡아서 VSCODE를 사용하고 싶지만, 안드로이드 스튜디오로 사용하려 합니다. 도움 감사합니다. 쉐프님 앞으로도 좋은 강의 부탁 드립니다.

[@janee0927]

안녕하세요 강의 잘 따라가고 있습니다!!! 근데 그 백그라운드 컬러 설정시 Colors.amber 부분에서 마우스를 대도 명암 미리보기 창이 안뜨는데 왜그런걸까요 ㅠㅠ 전 강의에서는 blue 했을때 Colors 단어부분 색이 바뀌면서 적용이 되었는데 지금은 Colors 글씨 색도 안바뀌고 미리보기 명암창도 안뜹니다.. 숫자로 그냥 적용하면 잘 적용은 되는데 명암창이 안떠요! ㅜㅜ

[@codingchef]

이 증상이 언제부터 나타난 건지요? 혹시 vs code를 사용중이고 최근에 플러터나 vs code를 업데이트 하셨다면 vs code의 에러일 가능성이 높습니다. 플러터나 vs code가 업데이트 될 때 자주 이런 이슈들이 있었습니다. 특히나 vs code에서 위젯 등의 자동 완성기능에 문제가 종종 있었습니다. 프로그램을 껏다가 다시 켜도 이런 문제가 지속된다면 아쉽지만 다음 업데이트까지 기다려 보는 것이 좋을 거 같습니다. 어느 순간 문제가 해결이 되거든요. 당분간 안드로이드 스튜디오를 사용하는 것도 한 방법이구요. 저도 작년에 한 동안 vs code에서 자동완성 기능이 안되서 애를 먹은 적이 있었습니다. ^^; 그외 또 다른 문제가 있으면 언제라도 알려주시기 바랍니다~

[@janee0927]

@@codingchef 헛 아 저는 vscode 말고 안드로이드 스튜디오로 쓰면서 이런 문제가 발생했숩니다!!

[@codingchef]

JANE CHA 아 그렇군요. ^^; 제 경험상 IDE문제라면 업데이트를 통해서 해결될거 같습니다만, 갑자기 기능이 안된다는건 조금 이상하네요. 우선은 IDE와 플러터를 최신버전으로 유지해 보시기 바랍니다.저도 오늘 집에가서 확인해 보겠습니다~

[@고슴-p4w]

Colors.amber에 커서두고 F1 누르면 됩니다. 강의 디테일 미쳤죠~그 어떤 유료강의보다 뛰어난 설명 원래 댓글 안쓰는데 이 강의는 코딩셰프님 도움드리고 싶네요.

[@hyunkim1158]

crome 에서 디버깅하면 문제없이 화면이 출력되는데 핸드폰 모양에서 디버깅하면 기본 핸드폰 바탕화면만 뜨고 제가 코딩한게 표현이 안되네요.. 어떻게 하면 될까요??

[@hyunkim1158]

혹시 virtual device manager 에서 create device 에서 어떤 것을 설치해야 할까요? (resizable / pixel xl / pixel 6pro 등등 많이 있는데 차이를 모르겠습니다...우선 "pixel 3a_api_33_arm64-va"를 다운 받았습니다만..) 도움주시면 감사합니다..ㅠㅠ

[@codingchef]

에뮬레이터 사용 시 최종적으로 상단의 녹색 삼각형 모양의 "실행 버튼"을 눌렀나 확인해보시고, 에뮬레이터는 Pixel XL, API 31 정도로 설치하면 될 거 같습니다.

[@hyunkim1158]

기존에 진행한 coding 을 삭제하고 새로운 프로젝트를 켜서 진행하니 이하와 같은 리포트가 나오네요... ---이하---- Error: ADB exited with exit code 1 Performing Streamed Install adb: failed to install /Users/junghyunkim/untitled5/build/app/outputs/flutter-apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE] Error launching application on sdk gphone64 arm64.

[@hyunkim1158]

"녹색 삼각형 실행버튼"을 누를 경우 crome 으로 켜지는 디버깅은 됩니다만... 핸드폰 모양으로 켜지는 방식으로 디버깅 시 핸드폰 기본화면(하단에 전화 문자, 메인화면에 카메라/사진/등 어플) 이 켜집니다..ㅠ

[@hyunkim1158]

4시간 정도 해결해보려 해봤는데..안되네요. 혹시 그냥 crome 방식으로만 디버깅 하면 나중에 한계가 있을까요?

[@jaehunchoi9780]

0:20 목표 설명 0:52 기본코드 만들기 3:15 appBar 디자인 4:47 appBar의 body backgroudColor -------> Scaffold 상단에 작성 5:25 Padding( ) 7:09 TextStyle ( ) 7:48 letterSpacing 9:17 fontSize 9:28 fontWeight 10:09 sizedBox 11:10 crossAxisAlignment

[@kino13730]

배경색 설정할 때 amber 말고 다른 색상 설정하면 적용이 안되는데 그 이유를 알 수 있을까요?

[@codingchef]

아닙니다. 다른 색상도 잘 적용됩니다. Colors.amber, Colors.red 등 모든 색상이 잘 적용됩니다.

[@matthewkang3691]

좋은 방송 감사합니다.

[@ytubewiki]

어제 비가 많이 내린 뒤라서 시원한 아침이네요. 오늘도 열심히 따라가고 있습니다. 2020.07.14

[@codingchef]

열심히 학습하는 모습이 멋지시네요! ^^

[@manlearning9185]

코딩 공부 처음인데 이렇게 쉽게 이해되는건 처음입니다 감격입니다~ 교수법이 남다릅니다~~ 쵝오! 플러터뿐만아니라 코딩셰프님의 모든것을 배우고싶습니다!

[@codingchef]

제 강좌를 좋게 봐주시니 감사합니다.^^; 보다 더 좋은 강좌를 만들기 위해서 노력하겠습니다~

[@비전공개발자주니-m5q]

플러터 강의 잘 보고 있습니다~ 코딩파파님꺼 보다가 약간 막히는게 있어서 셰프님 강의 들으니 상호보완이잘되는거 같아요!!! 감사합니다 근데 해당 영상의 Color에서 저는 마우스를 갖다 놔도 컬러색상이 그레이딩처럼 안보이는데 윈도우라 그런건가요~? amber에 직접 들어가면 해당 색상들이 보이긴 합니다! 아! 혹시 안드로이드 스튜디오라 안보이는걸까요..?

[@codingchef]

안드로이드스튜디오에서도 가능합니다.^^ Settings -> Editor -> General -> [checkbox]Show quick documentation on mouse move 로 설정해 보세요~

[@비전공개발자주니-m5q]

@@codingchef 감사합니다~ 그런데 여전히 ㅠㅠ 안뜨네요 마우스 오버할 경우 해당코드에대한 정보만 오른쪽페이지에 떠요 ㅠㅠ 제가 검색능력이 부족한거같네요 ㅠㅠ

[@codingchef]

@@비전공개발자주니-m5q 아, 그런가요? 제가 지금 밖에 나와 있어서 오후쯤에 다시 한 번 살펴 보고 답변을 드리겠습니다~^^

[@비전공개발자주니-m5q]

@@codingchef 정말 감사합니다 ㅠㅠ

[@codingchef]

@@비전공개발자주니-m5q 안드로이드 스튜디오에서 한동안 color tooltips를 신경 안쓰고 사용했었는데 지금보니 dart plugin이 업데이트 되면서 기능이 사라졌네요;; 정히 color tooltips 기능을 사용하시려면 dart plugin을 192.7761 버전으로 다운그레이드 하셔야 할 거 같습니다.ㅜㅜ

[@small__smile]

body: Padding( 넣을 때, padding: EdgeInsets.. 를 먼저 넣으면 child가 안들어가져요. child를 먼저 타이핑하면 가능하구요. 이유가 무엇일까요?

[@Jeong3187]

미투: "강좌 너무 상세하고 좋습니다.. 감동해서 모든 동영상에 댓글 좋아요 누르고 갑니다!! 좋은 강좌 또 만들어주세요!"

[@forhealth]

230130 22시26분! 어서 강의 진도 나가고 싶어서 칼퇴했습니다! 응용하면서 해보고 있는데 너무 재밌어요 감사합니다 선생님! 한가지 고민은 VS code에서 emulator가 즉각적으로 안뜨고, 떠도 변경사항이 바로 적용이 안되고 먹통이 되곤합니다. 그럼 안드스튜디오 켰다가 다 끄고 다시했다가.. 이러다 보면 VS code에서 되긴되는데 이 과정에서 항상 시간을 많이 잡아먹네요. 아예 안되는건 아닌데 왜이러나 싶습니다 자꾸하다보면 뭔가 최적화(?)가 되겠죠? 놋북아 힘내라....😂😂😂😂

[@codingchef]

순한 맛 강의 후반부부터는 안드로이드 스튜디오를 사용합니다. 초기 vs code에 이런저런 관련 에러들이 좀 있었거든요. 큰 차이가 없으니 안드로이드 스튜디오를 사용하는 것도 한 방법이고 아니면 에뮬레이터 대신 실제 기기로 테스트 해보는 것도 좋습니다. 속도면에서도 더 빠르고요.

[@forhealth]

VScode가 뭔가 UI가 깔끔하니 제스타일이었는데 오류가 있다니 아쉽네요 🥲 고민없이 안스 써보겠습니다! 선생님 좋은 하루되세요!

[@codingchef]

@@forhealth 아. flutter 초창기에 그랬다는 의미입니다. 현재 저는 매운맛 강좌에서는 효율성을 위해서 다시 vs code를 사용하고 있습니다.

[@강현우-i1q]

오늘도 신나는 flutter 공부 시간 !! 맛나요 셰프님!!

[@이지현-q6d]

강좌 너무 상세하고 좋습니다.. 감동해서 모든 동영상에 댓글 좋아요 누르고 갑니다!! 좋은 강좌 또 만들어주세요!

[@그불나한]

감사합니다

[@매를버는승진이]

좋은강좌 감사합니다.

[@kyuchullee4727]

정주행중.. 감사합니다!

[@junhyung4574]

좋은 강의 감사합니다!!

[@도전한국연예인]

덕분에 나이 50넘어서 코딩에 도전해봅니다.

[@codingchef]

정말 반갑습니다. 아시겠지만, 해외에서는 60대 현역 프로그래머들도 많이 존재합니다. 열정을 진심으로 응원하겠습니다. 그리고 학습하시다가 궁금한 점이 생기면 언제라도 알려주시기 바랍니다~!

[@sangwoonlee4391]

강의가 너무 재미있네요. 파이썬 공부중이었는데, flutter에 빠졌어요 ㅎ

[@codingchef]

둘 다 재미있게 학습하시기 바랍니다. ^^

[@박종혁-z1b]

안녕하세요 셰프님 공부를 하다보니 궁금증이 생겼는데요. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'BBANTO', home: Grade(), ); } } title 밑에 home 에 어떤 경우는 MyhomePage 를 입력하고 지금은 Grade 를 입력했는데 이게 정해진건지 아니면 제가 그냥 상황에 맞게 입력하면 되는건지 궁금합니다.

[@codingchef]

home 알규먼트에서 불러오는 위젯은 커스텀 위젯이라는 것입니다. 즉, 자신의 원하는 이름을 위젯명으로 지정해주면 되는 것이기 때문에 아무 이름이나 넣어주면 됩니다.

[@박종혁-z1b]

@@codingchef 빠른 피드백 덕분에 금방 궁금증을 해소할 수 있네요 감사합니다!!

[@롱블랙-f7x]

진짜 플러터 1타강사.....

[@codingchef]

과분한 칭찬 감사합니다. ^^;

[@taelee1392]

친절한 설명 감사합니다. 너무 쉽게 따라갈 수 있어요!

[@codingchef]

반갑습니다. 학습하다가 궁금한 점이 생기면 언제라도 알려주세요~

[@고진규-l8m]

왜 저는 마우스 올려도 색상이 안뜰까요 ㅠㅠㅠㅠ 스튜디오로 하고있습니다!

[@codingchef]

안드로이드 스튜디오는 현재 이 기능을 지원하고 있지 않습니다.

[@고진규-l8m]

교육과 다른 내용이지만, 무료 템플릿 사용방법좀 알려주시는 영상 찍어주시면 안될까요..? 구글링해도 안나오네요.. 템플릿 순위만 나오고

[@findByEmail]

강좌10 완료 감사합니다.