앱 개발 - flutter (1) 설치 및 개발 환경 구축

flutter는 구글에서 개발한 앱 개발 프레임워크로, ios와 안드로이드 모두 사용 가능한 크로스 플랫폼이라는 특징이 있다.

언어는 dart 언어를 사용하는데, javascript와 유사하다고 한다. (dart는 써본 적 없긴 한데 javascript 써 봤으니 괜찮겠지..)

 

크로스 플랫폼 프레임워크로 리액트가 있긴 하지만 성능 면이나 난이도 면에서 flutter가 더 좋다고 하여 공부를 시작해보려 한다.

우선 설치를 하고 앱 화면을 띄워보는 것까지 할 생각이다.

구글에 flutter 검색하면 나오는 공식 홈페이지 https://flutter.dev/ 에 들어가서

우측 상단에 get started를 누르고 자기 노트북이나 컴 os에 맞게 선택을 한 뒤에 flutter를 이용해

안드로이드 앱, 웹, 데스크탑 앱 중에 어떤 걸 만드려고 하는지 선택하고 아래로 내리면 .zip 파일이 있다.

그걸 클릭해서 다운을 받고 c드라이브에 압축을 풀어준다.(파일 경로에 한글이 있으면 안된다고 해서 안전하게 c드라이브에 넣는걸 추천한다.)

 

이제 flutter 환경변수를 설정해줘야 한다.

윈도우에서 환경변수를 검색해서 시스템 환경변수 편집에 들어가준다.

정말 오랜만에 보는거 같은데 아무튼 처음에 들어가면 왼쪽 창이 뜨는데 아래에 환경 변수를 누르면 오른쪽 창이 뜬다.

아래 시스템 변수에서 path를 찾고 편집을 누르면 오른쪽 창이 뜨는데 새로 만들기를 누르고

아까 압축 풀었던 flutter 폴더에서 bin으로 들어가서 주소를 복사해서 새로 만들기에 붙여넣어준다.

확인을 누르고 나오면 설정 끝이다.

잘 됐는지 확인하기 위해서 cmd창에 들어가서 flutter doctor를 실행했을 때

이렇게 잘 떴으면 된거다.

 

다음은 안드로이드 스튜디오를 설치해야 한다.

flutter로 앱을 만들면 테스트를 위해서 실행을 해봐야 하는데 이를 위해서는 에물레이터가 필요하다.

안드로이드 스튜디오 설치는 그냥 공식 홈페이지 들어가서 하면 되고 버전마다 ui는 다를 수 있다.

안드로이드 스튜디오를 설치했으면 실행하고 plugins에서 markerplace에 들어가 flutter를 검색해 install 받으면 된다.

마찬가지로 dart도 검색해서 install하면 된다.

 

설치를 하고 projects로 가 보면 new flutter project라는게 새로 생긴 것을 확인할 수 있다.

 

안드로이드 스튜디오는 에뮬레이터에서 테스트를 해보기 위해 필수적인데 개발 코딩 자체는 vscode에서 하는게 편하다.

vscode가 훨씬 가볍기 때문인데 vscode에서도 flutter를 설치해야 한다.

왼쪽 아이콘들에서 extension을 찾아서 들어가고 flutter를 검색한 뒤 install 하면 된다.

 

이제 프로젝트를 만들고 실행해볼건데 그 전에 flutter 환경을 체크해야 한다.

cmd에서 flutter doctor를 실행하면 된다.

안드로이드 스튜디오와 vs code가 잘 체크되어 있는걸 확인할 수 있다.

visual studio는 어차피 안쓸거니까 넘기고 android toolchain에서 두가지 문제가 보인다.

우선 cmdline-tools부터 해결하기 위해 안드로이드 스튜디오를 실행해서 projects에서 점3개를 눌러 sdk manager로 들어온다.

여기서 sdk tools로 넘어가 hide obsolete를 해제하고 command-line tools와 sdk tools를 체크해서 ok를 누르면 된다.

 

이제 license가 없다고 뜨는걸 해결하기 위해서 

cmd창에 flutter doctor --android-licenses 를 복붙하고, 중간중간에 y를 누르면 된다.

그리고 다시 flutter doctor로 검사해보면 이렇게 나온다.

visual studio는 안쓸거니까 넘어가고 안드로이드 스튜디오 2021.3이 에러나고 2024.1이 새로 생긴 이유는 sdk 관련 에러가 안 고쳐져서 그냥 안드로이드 스튜디오를 지웠다 최신 버전으로 아예 다시 깔았다.

 

이제 프로젝트를 만들고 실행을 해볼 차례이다.

안드로이드 스튜디오부터 해보면, 

 new flutter project를 누른다.

flutter에 들어가서 sdk path에 flutter 설치 폴더를 넣어주고 next를 눌러서 프로젝트를 만든다.

이렇게 생성이 되는데 우측상단에 폰이랑 초록색 아이콘이 같이 있는 버튼을 눌러서

device manager에 들어간다.

여기서 device를 원하는대로 추가해주고

no device selected에서 

이렇게 실행할 에뮬레이터를 골라주면 된다.

만약에 디바이스가 안 뜨면 밑에 Refresh를 누르고 조금 기다려주거나 안드로이드 스튜디오를 재시작하면 된다.

 

이렇게 에뮬레이터 고르고 실행하면 된다는데 나는 안된다.

왜 안되는지는 모르겠는데 디바이스를 고르고 실행하면 에뮬레이터 창이 아무리 기다려도 안 뜨고

그냥 아까 device manager에서 실행 버튼으로 원하는 디바이스를 실행을 시켜 놓고 나서 

no device selected에서 고른 다음에 코드를 돌려야 에뮬레이터에서 앱이 열린다.

이렇게 먼저 실행시켜놓고 

실행하면 제대로 앱이 켜진다.

 

아 그리고 앱이 만약 제대로 실행이 안되고 에러가 생긴다 하면 sdk 문제일텐데 에러 메시지를 잘 보고 이것저것 설치해야 한다.

tools에서 sdk manager로 가면 이런 설정창이 뜨는데 에러 메시지를 보고 platforms인지 tools인지 보고 필요한 버전에 sdk를 설치해줘야 한다. 필요한게 안 보이면 밑에 hide obsolete도 해제해보고 show package details도 체크해봐야 한다.

 

 

이번엔  vscode에서 실행해보겠다.

view에 command pallette를 눌러서 flutter project를 생성하면 된다.

이건 기본 코드인데 이걸 실행하려면

여기서 run and debug를 누르면 된다.

그럼 이렇게 실행이 된다.

이건 크롬 창에서 실행이 된 모습인데 안드로이드 스튜디오에서 설정했었던 에뮬레이터로 실행해보고 싶다 하면

아까 flutter project를 만들 때와 똑같이 view, command palette로 가서 flutter select device를 검색하면 된다.

그럼 이렇게 뜬다.

여기서 크롬창 말고 원하는 에뮬레이터를 선택하면 된다.

그럼 이렇게 잘 실행된다.