이제 데이터 공부 안하는 블로그

[flutter] 필요한 설치와 환경 설정 1 for 왕초보 본문

플러터

[flutter] 필요한 설치와 환경 설정 1 for 왕초보

공사노비 2021. 1. 5. 22:43

맥에서 flutter 개발을 하기 위해서는 여러가지를 설치해주어야 합니다. 

저는 vs code를 사용하고 있어서 vs code는 빼고 설치하더라도

  • flutter sdk
  • android studio
  • xcode

일단 몽땅 다운 받습니다. 저는 하나하나 다운 받으면서 했는데 몽땅 다운 받고 시작하는게 편할거 같아요. 

flutter sdk를 다운 받으면 압축을 풀고 압축이 풀린 폴더를 기왕이면 상위 폴더 HOME에 붙여넣기 해줍니다. 저는 home에 dev(개발)폴더를 만들고 거기에 flutter폴더를 넣었습니다. 이렇게 하면 터미널에서 사용하기 편한거 같습니다. flutter홈페이지에 보면 맥 유저가 해야할 것들이 자세히 나와있기는 합니다. 하지만 잘안됩니다 ㅠㅠ 몇시간 헤매면서 설치했어요. path설정해주는 부분이 거의 시작인데 여기서 막혔습니다. 저는 최신 mac os인 big sur를 사용중입니다. 영구적으로 path를 추가 하기 위해서는

  • terminal을 열어서 vim .zshrc를 쓰고 엔터
  • 파일이 열리면 i를 누르고(insert 모드 진입) 쓴다. export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin" 쓰고 나서 esc키를 누르면 Inser모드에서 빠져 나가고 :wq 엔터  하면 파일을 닫는다. 
  • 다시 터미널의 명령 프롬프트로 돌아오면 쓴다. source .zshrc   위에 쓴파일을 시스템에 업데이트함.
  • 명령프롬프트에 flutter --version 써서 잘나오면 성공. 뭐 설치하라고 나오면 하면됨(xcode관련. xcode가 설치되어있다면 안나옴)
  • 명령프롬프트에 flutter Doctor라 쓰면 지금 필요한게 뭔지 잘설치된게 뭔지 자세히 나온다.

저의 경우엔 android toolchain이 [i]로 경고가 떴는데 licenses가 어쩌구 하는 부분이었습니다. 친절하게 어떻게 하면 된다고 나옵니다. run:flutter doctor -- licenses 이런식으로 나오는데 복사 붙여 넣기 하면 다 설치됩니다.

이제 android studio설치하기. 쭉쭉 하란 대로 설치하고. 설치가 다되면 오른쪽 아래에 configure > preference > plugin에서 검색창에 flutter 검색후 install합니다. . 다 설치되면 재시작됩니다. 이제 flutter project를 생성해봅니다.

create new project 선택  > flutter application  > name은 아무거나 하고싶은 이름하고, sdk path에는 아까 flutter 폴더를 넣은 곳을 선택해줍니다. 이미 선택되있을수도 있어요.  그리고 마지막으로 finish 눌러주면 끝. 이제 flutter 에서 제공하는 예제가 뜹니다. 이제 에뮬레이터로 어플리케이션을 실행해봐야겠죠. 우측 상단에 상태 표시줄을 보면 no device로 뜨죠. 이제 디바이스를 연결합니다. 핸드폰 모양으로 안드로이드가 붙어있는 아이콘을 클릭하고 create virtual device 클릭, nexus 6선택, Q download누르면 한참동안 다운로드합니다. 다 설치되면 next누르고 설정에서 graphics부분을 Hardware로 바꾸면 perfomance가 더 좋습니다. 완료하고 실행하면 넥서스 6 안드로이드 폰의 화면이 뜹니다. 로딩이 다 완료된 상태에서 다시 android studio 코드 화면으로 가서 디버그 버튼을 누르면 여차저차 한참 프로세싱 하고 앱이 실행됩니다.