MacOS 맥에서 Flutter 플러터 시작하기, 설치 및 vscode 세팅 방법 (1)

# MacOS 환경 입니다.

 

1. Flutter 설치하기, Dart 설치하기 

 

flutter 설치하고 세팅하고 이런것들이 귀찮다면 맥os는 아주 좋은 Homebrew를 사용하시면 됩니다.

Homebrew 설치는 구글링하면 자세히 나옵니다.

 

Flutter 설치 페이지 

https://formulae.brew.sh/cask/flutter#default

flutter

 

사이트 들어가시면 명령어를 친절히 알려줍니다. 

brew install --cask flutter

맥 iterm 또는 Terminal 터미널에서 위 명령어를 쳐줍니다.

 

그러면 세팅이 필요없이 설치가 완료 됩니다.

세팅이 잘 되어있는지 확인을 해야하는데 (필수입니다)  터미널에서 명령어를 쳐줍니다.

flutter doctor

이 명령어를 치면 flutter 검사를 해줍니다. 에러가 표시되면 설명대로 해결하면 됩니다.

필자는 이렇게 뜹니다. 요상한 !는 뜨지만 에러가 아니니 무시했습니다.

 

2. Flutter 프로젝트 만들기

그러면 원하는 폴더에 접속해서 터미널 명령어를 칩니다.

flutter create 프로젝트이름(영어로 소문자)

flutter create 명령어 뒤에 프로젝트 폴더명을 적어주면 프로젝트 생성 성공입니다.

저는 vscode로 개발환경을 구축했습니다.

 

3. vscode 비쥬얼 스튜디오 코드 세팅값 추가하기

왼쪽 아래 톱니바퀴 버튼을 클릭해서 명령 팔레트를 켜줍니다.

톱니바퀴 클릭 후 명령 팔레트 클릭

명령 팔레트에서 settings을 엽니다.

open user settings (JSON)을 골라서 클릭합니다.

 

//dart settings, save할때 파란줄 const 자동 해결
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  //dart settings2
  "dart.previewFlutterUiGuides": true,

위에 첫번째 세팅은 저장 명령어를 입력했을때(보통은 command + s) 자동으로 const를 해결해줍니다. 

- > 자동으로 채워주다보니 추후에 코드 수정시 에러가 뜨는걸 조심해야 합니다.

 

아래 dart.previewFlutterUiGuides 는 언어자체가 객체 지향 언어이기 때문에 코드줄을 굉장히 찾기 어렵습니다.

하지만 이를 true로 해주면 가독성이 증가합니다.

이 사진처럼 Row 안에 Button이 2개가 있는걸 확인 가능합니다.

 

4. vscode 익스텐션

Dart, Flutter는 설치하시면 됩니다.(필수)

 

 

 

감사합니다. 

 

Flutter는 정말 매력적인 기술입니다. 구글이 꾸준히 지원만 계속해준다면..프론트에게 큰 변화가 일어날거 같습니다.

Good hacking