www.youtube.com/watch?v=P2RG9pfgN5Y&list=PLPtc9qD1979A8rRP0-YAUQMFImze5PnFN&index=2
코딩의신의 두번째 강의.
www.youtube.com/watch?v=3JMjR_ahT44
코딩의신은 윈도우인데 나는 맥이라 더코딩파파의 강의를 참고하였다.
1. Flutter 설치
1) 공식홈페이지 들어가서 설치한다.
(1) 우측상단 'Get started' 누르기
(2) 본인 운영체제 맞는 거 선택. 나는 macOS
(3) 파란 버튼 눌러서 다운받기. 버그가 가장없는 stable 버전, 안정화 버전 다운받기.
(4) 압축파일을 푼다.
(5) 압축파일을 풀어서 생긴 폴더를 옮겨준다. 나는 홈디렉토리(yoosujeong) 밑에 Developer라는 폴더를 새로 만들어서 옮겼다.
(6) Flutter 안에 있는 bin PATH를 설정해준다.
위는 그 순간만 설정해주는 것이므로, 다른 방법을 사용한다. 'Update your path'를 눌러준다.
flutter.dev/docs/get-started/install/macos#update-your-path
여기 나오는 과정 그대로 따라하면 된다.
-1. 터미널 열어서 username 폴더로 간다.
-2. vim .zshrc 해서 아래와 같이 입력해준다. (카탈레나 기준)
-3. source .zshrc 해준다. 시스템에 업데이트해준다는 뜻.
-4. flutter --version 해준다. 만약 뭔가 설치된다면 설치가 다 될 때까지 기다렸다가 다시 flutter --version 해준다.
-5. flutter doctor 하면 어떤게 설치가 잘 되어있고, 어떤게 안되어 있는지 확인할 수 있다. 만약 뭔가 설치된다면 마찬가지로 기다리면 된다.
flutter는 잘 설치되어 있지만 android toolchain이나 xcod
e는 설치가 안되어 있다는 뜻. 사진에는 없지만 아래에 ! 표시도 있는데, 이것 역시 없다는 뜻이다. android studio, connected device도 없다.
하지만! 나는 위의 방법도 잘 되지 않았다,,, 이것은 함정,,, 그래서 직접 환경변수를 bash_profile(혹은 .bashrc (둘의 차이점은 제일 아래 참고))에서 설정해주는 방법을 택했다,,, 아래의 사이트를 참고,,,, (flutter가 잘 돌아가면 이과정은 생략가능)
1) 아래 PATH(사용자)까지 들어간다.
2) vim .bash_profile 한다.
3) 제일 아래줄을 추가한다. 여기서 PATH는 본인 flutter/bin 위치를 써주면 된다. 하고 저장.
2. Android Studio 설치
1) 우측에 Android setup을 눌러주고, 중앙의 Android Studio 버튼을 눌러준다.
2) 가운데 버튼을 눌러 다운로드해준다.
3) 이런 화면 나오면 드래그 해서 옮겨준다.
4) 실행
(1) 아래 같은 거 나오면 Do not 선택해줬다.
(2) 다음에 뭐 Share 어쩌고 나오는 건 Share 해줬다.
(3) 아래 같은 화면 나오면 next.
(4) standard --> next
(5) 원하는 테마 누르고 next
(6) Finish
(7) 보안 관련 문제 뜨면 '보안 및 개인 정보 보호 열기' 같은 버튼 눌러서 '보안 및 개인 정보 보호' 설정창을 연다. 하단 자물쇠 눌러주고 허용해준다.
(8) 다시 안드로이드 스튜디오로 돌아가서 Finish 해주면 웰컴화면 나온다. 하단 Configure에서 Preferences 선택해준다.
(9) Preferences 창에서 Plugins 선택.
(10) 중앙 검색창에 flutter 검색해서 install. flutter 설치하면 dart 언어도 설치된다.
(11) 설치가 완료되면 Install 버튼이 Restart IDE로 바뀌는데 눌러서 재시작해준다.
3. 새 프로젝트 만들기
1) 홈화면에서 create flutter project
2) 적당히 이름이랑 경로 설정해주고 시작.
3) Android Emulator 생성
(1) 우측 상단의 이 버튼 클릭.
(2) Create Virtual Device 버튼 클릭
(3) 퍼포먼스를 최대한으로 끌어올리기 위해 Nexus 6 선택. 원하는 거 해도 됨. Next.
(4) 운영체제 선택. 운영체제는 다운 받아야 하는데 몇 분 소요될 수 있다. Next.
(5) 원하는대로 이름이랑 설정해주면 되는데, Emulated Performance는 Hardware로 하겠다. 퍼포먼스가 훨씬 빨라지기 때문.
(6) 실행하려면 우측의 플레이버튼 누른다.
4) Android Emulator에 앱 실행
(1) 이건 디버그 모드로 실행하는 것. 클릭한다. 그 좌측의 플레이버튼은 그냥 실행하는 것이다.
(2) 누르면 아래 콘솔창에 이렇게 런칭하고 있다는 것이 뜬다. 몇분 소요된다.
4. .bash_profile 이나 .bashrc 잘 되었는지 확인 한 번 하기.
5. Xcode 설치
1) 앱스토어에서 Xcode 설치
2) Xcode 열어서 동의. 무조건 한번 해야 안드로이드에서 플러터 개발 시 iOS 시뮬레이터 만들 수 있다.
3) 동의하면 Installing components 하면서 막 설치됨. 다 될 때까지 기다린다.
4) 홈 화면 뜨면 설치 완료된 것. 그러면 Xcode는 그냥 끄고, 터미널에 flutter doctor 해서 확인. 그런데 나는 flutter doctor가 잘 작동되지 않았다. 분명 설치했는데 왜 x가 뜨는 것인가,,, 만약 flutter doctor해서 설치 안했다고 뜨더라도 설치한 것이 분명하고, 추후 과정도 문제 없다면 그냥 넘어가도록 한다.
5) 해당 명령어(flutter.dev의 Get started의 iOS setup 부분에 있음) 터미널에서 실행
6) 아무 에러메세지도 안뜨면 성공한 것이니 그냥 넘어가자.
7) 아래 명령어도 한 번 실행.
8) 7)의 명령어 실행시 약관이 막 뜨는데 계속 space 누르다가 마지막에 agree 입력해주고 엔터치면 끝.
6. iOS Simulator 실행
1) 다음 명령어 터미널에 입력
2) 아래처럼 아이폰 뜬다. 기종은 맥북 하단 아이콘바의 시뮬레이터 아이콘에서 오른쪽 마우스 클릭 --> Device에서 바꿀 수 있다.
3) Android Studio 켜서 아까 만든 프로젝트 열기
4) 안드로이드 스튜디오 상단에서 아래 그림 같이 생긴 디버그 모드로 실행 아이콘 누르기. 시간 좀 걸린다. 좀 많이.
5) 새하얀 화면이 뜨면 빌드가 잘못된 것. 상단의 빨간 네모(중지) 아이콘을 누른다. 그러고 다시 4)의 아이콘 누른다.
만약 그래도 안되면,,,,
(1) 프로젝트 폴더의 ios에서 오른쪽 마우스 클릭. --> Flutter --> Open iOS module in Xcode
(2) Xcode 상에서 모듈이 열린다.
(3) 상단에 Runner 확인하고 실행
(4) 만약 여기까지했는데도 실행이 안된다면,,,,
-1. 이런 에러가 뜬다면,,,
-2. flutter clean 명령을 터미널에서 실행시킨다. 이 때, flutter clean은 Flutter project의 루트 디렉토리에서만 실행시킬 수 있다.
-3. 또 이런 에러가 뜬다면,,,
-4. flutter build ios 명령을 터미널에서 실행시킨다.
7. CocoaPods 설치
physical iOS device에서 플러터 앱 사용하려면 cocoapods 설치 필요.
하지만 나는 역시나 에러가 났고, 그래서 아래의 사이트를 참고하여 brew 명령어를 통해 설치하려 하였지만
또 다시 에러가 나서, 아래의 사이트를 참고하여 --cask 옵션으로 설치해주었다. 하하하하. 한번에 설치되는 것이 없군. 무언가 잘못되었어.
오호라 그런데 또다시 에러가 나서(이미 있다는 에러), 아래 명령어를 통해 삭제해주고 다시 --cask로 설치해주었다. 후 드디어 설치 완료.
8.
<참고>
bin : binary의 약자. 실행파일이 있다는 뜻.
Unable to locate adb 에러가 뜰 때 : reasley.com/?p=3565
hidden file 보는 법 : Cmd + Shift + .
Mac OS 버전 Catalina 이상 : ".bashrc" / 이전 : ".bash_profile"
'Flutter' 카테고리의 다른 글
| [Flutter] 플러터(Flutter) Unable to load asset 에러 해결 방법 (매우 간단) (0) | 2021.11.22 |
|---|---|
| [Flutter] #1. 왜 Flutter인가 & Dart 소개 (0) | 2021.01.31 |