2장 Mac Flutter 개발환경 설정

https://www.appbrewery.co/courses/548873/lectures/9950619

Prerequisites for Building Apps with Flutter

#플러터개발환경설정

윈도우나 맥 어디에서든 개발 가능하다. 안드로이드 스튜디오, 비쥬얼스튜디오코드 둘다 가능하다. 이 강의에서는 안드로이드 스튜디오를 사용할 것이다.  에뮬레이터, 시뮬레이터, 코드 상세, 앱 디바이스 실행 등 모든 것이 월등하다. 아이폰 앱을 만들기 위해선 맥이 필요하다. 아이폰 앱은 꼭 아이폰에서 테스트해보길 추천한다. 

 

윈도우 설치순서

1) 플러터 SDK 설치

2) 안드로이드 스튜디오 설치

3) 안드로이드 에뮬레이터 설치

 

맥 설치순서

1) 플러터 SDK 설치

2) 안드로이드 스튜디오 설치

3) 안드로이드 에뮬레이터 설치

4) Xcode와 command line tools 설치

5) iOS 시뮬레이터 테스트

 

https://www.appbrewery.co/courses/548873/lectures/9950589

Mac Setup Step 1 - Install the Flutter SDK

#플러터SDK설치

최소 모하비 이상의 운영체제버전과 약 10기가 최소 700MB정도의 여유 공간이 필요하다. 

~/.zshrc에 flutter SDK 경로를 설정해준다.

export PATH="$PATH:$HOME/moai/flutter/flutter/bin"

flutter --version 명령어가 정상 출력된다면 제대로 설정된 것이다.

 

https://www.appbrewery.co/courses/548873/lectures/9951051

Mac Setup Step 2 - Install Android Studio

#안드로이드스튜디오설치

안드로이드 스튜디오를 다운받는다.

다운받으면 환경설정을 크릭하고 플러그인에 들어가 Flutter를 설치해준다. dart 설치 질문에 yes를 답한다. 이후 재시작하면 이전에 없던 메뉴인 Start a new Flutter Project라는 메뉴가 생성되어 있을 것이다. 

프로젝트를 생성하고 SDK가 잘 설정되어있는지 확인한다.

 

https://www.appbrewery.co/courses/548873/lectures/9951112

Mac Setup Step 3 - Install the Android Emulator

#M1 안드로이드 에뮬레이터 설치

안드로이드 에뮬레이터를 설치해본다.

Tools -> AVD Manager

디바이스는 Nexus 6, Image는 Android P(Pie) 를 추천한다. 하지만 난 m1이라 P를 선택할 수 없었고 Android S 이미지를 선택했다. 여기서 중요한 것은 Emulated Performace에서 그래픽을 Hardware - GLES 2.0을 선택해야한다. 그래야 빠르다. 에뮬레이터를 실행하고 타겟을 지정한뒤 플레이버튼을 눌러 데모앱을 띄워보자. 처음 빌드는 10초 정도 시간이 소요됐다. 처음엔 에러가 발생했으나 JDK를 8버전으로 낮추고 .zshrc에 PATH를 지정하자 정상적으로 실행되었다. 

 

https://www.appbrewery.co/courses/548873/lectures/9951170

Mac Setup Step 4 - Install Xcode

#xcode설치

App Store에서 Xcode를 설치해준다. Xcode에서 모든 항목에 동의한 후 

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 

를 터미널에서 실행한다

이후 xcode를 종료한다,

 

https://www.appbrewery.co/courses/548873/lectures/9985789

Mac Setup Step 5 - Test the iOS Simulator

#xcode #simulator

spotlight에서 simulator을 실행해준다.

그리고 디바이스를 안드로이드가 아닌 iPhone로 선택해준다.

런 버튼을 보면 숫자가 2개일 것이다 (안드로이드, 아이폰) 스탑버튼으로 정지시키고 싶은 에뮬레이터를 선택할 수 있다.

 

https://www.appbrewery.co/courses/548873/lectures/9985896

[Optional] Configure Android Studio for Flutter Development

# 테마변경 #환경설정 #뷰티파이 #키맵

 

기호에 따라 환경설정 메뉴에서 다크모드 테마, 폰트크기를 변경할 수 있다.

Languages & Frameworks 의 Flutter 메뉴에서

Perform hot reload on save, Format code on save를 체크해주자. 세이브 시 에뮬레이터에 코드가 즉시 반영되고 탭이 깨졌을 경우 알아서 예쁘게 수정해준다.

환경설정의 KeyMap기능을 이용하면 메뉴에 단축키를 내 마음대로 만들어줄 수 있다.

 

https://www.appbrewery.co/courses/548873/lectures/9986020

[Optional] Guided Tour of Android Studio for Flutter Development

#안드로이드스튜디오화면구성 #플러터폴더구성

android, ios폴더는 자동적으로 플러터앱이 생성한다.

lib폴더에 우리가 생성한 dart코드가 존재하며 대부분의 시간을 이 폴더에서 보낼 것이다.

pubspec.yaml 파일이 진짜 중요한데 플러터앱의 컨피그를 설정하는데 사용된다. 써드파티라이브러리, 다른 패키지, 에셋폴더 등 다음강의에서 자세히 다룰 예정이다. 코드의 위치를 찾고 싶으면 좌측상단의 동그라미 조준그림의 아이콘을 클릭하면 된다. 

에디터 패널에서 좌측의 마진은 개발하는데 도움을 준다. 예를들어 색깔이 진짜 무슨 색인지 알려준다. 그리고 코드가 길면 잠시 collaps 시킬 수도 있다. { ... }

좌측 하단의 Dart Analysis 버튼을 누르면 빌드를 하지 않더라도 코드에 문제가 있는지 체크해주고 가이드를 준다. 그리고 코드에 마우스 오른쪽 버튼 클릭 후 Reformat Code wi dartfmt를 선택하면 코드를 예쁘게 포맷팅(뷰티파이)해준다. (쉬프트 + 커맨드 + 1)

우측의 아웃라인 기능을 이용하면 스캐폴드 트리를 볼 수가 있다. 트리의 노드를 클릭하면 코드 위치도 자동으로 이동된다.

우측의 인스펙터를 이용하면 위젯의 속성정보 화면 구성 정보를 자세히 볼 수 있다.