Flutter를 시작하는데 다운로드부터 막막하여 고생좀 했다.
다운로드 했던 경험을 블로깅 하려 한다.
만약 Window로 진행한다면 밑 참고자료의 유튜브 영상을 보는게 빠르다
환경
운영체제 : MacOs
참고자료 :
1. Flutter 공식 문서
2. How to download and install Flutter in Android Studio on Windows 10 tutorial in 2023
Android Studio 다운로드
Flutter를 사용하기 위한 IDE로 Vscode, VIm, Intelij 등 다양한 IDE가 있지만 본인은 JetBrains을 좋아하고 virtual device(가상 디바이스)를 지원하는
Android Studio를 선택했다.
(젠장 나중에 Intelij에서도 Virtual Device기능을 지원하는걸 알았다...)
처음엔 이화면이 아니지만 나중에 사진을 찍어 이화면 밖에 없다...
Android Studio를 설치하는 방법은 다른 곳에도 많이 나오기 때문에 생략한다.
(SDK Tool,Flutter 설치는 밑에서)
또한 Android Studio에서 Flutter어플을 개발하기 위해서는 Plugin을 설치해줘야 한다.
plugins에 들어가 Flutter를 검색하고 설치한뒤 reload IDE를 갈긴다.
그러면
이렇게 예쁘게 나온다.
Flutter 앱을 개발하기 위해 선택하면
SDK를 선택하라 한다.
이 Flutter SDK를 설치하기 위해 고생좀 했다.
Flutter 설치 (MacOS)
먼저 flutter 공식 문서에 가서 본인 환경에 맞는 설치 옵션을 선택한다.
본인은 macOS를 선택한다.
그다음 개발 플랫폼을 선택한다.
본인은 Android를 선택했다.
(Flutter는 멀티 플랫폼을 지원하기 때문에 딱히 상관없다.)
다음 페이지에서 Install the Flutter SDK 부분까지 스크롤하여 내린다.
본인에게 맞는 CPU를 고려하여 압축파일을 다운로드 한다.
또한 다운로드한 압축파일을 압축해제하면 flutter 폴더가 나온다.
이 flutter폴더가 SDK(Software Development Tool)이다.
이 flutter 폴더를 적당한 곳 (본인은 ~/sdk/flutter 에 옮겨놨음)에 옮겨 관리하기 쉽게 한다.
이제 Android Studio에서 SDK를 설정이 가능하다.
이제 개발이 가능한 플랫폼을 확인해보자
개발이 가능한 플랫폼을 확인해보자
flutter SDK를 설치했으니 개발가능한 플랫폼을 확인 가능하다.
터미널에서 flutter doctor를 실행 해보자
근데 flutter는 모르는 명령어라고 에러를 뱉을 것이다.
환경변수에 flutter를 추가해보자.
본인은 ~/.zshrc에 존재하는 파일을 편집하여 환경변수를 편집 하였다.
다양한 문서 편집기로 편집해도 되지만 본인은 간단한 문서편집을 할때 애용하는 Vscode로 편집하였다.
만약 code 명령어가 터미널 PATH에 추가 되어있다면
code ~/.zshrc 로 빠르게 열수 있다. (아니라면 어떻게든 열어보자^^)
나의 .zshrc 파일이다.
brew 명령어, npm 명령어, flutter 명령어, 자바 버전이 다양하기 때문에 JDK 경로를 여러개 관리 하는 모습도 보인다.
여튼 flutter 명령어 변수를 저렇게 추가 해준다.
export PATH=~/sdk/flutter/bin:$PATH
추가한뒤 .zshrc 파일이 존재하는 터미널 에서
source ~/.zshrc 를 실행하여 변수를 등록해준다.
그런뒤 flutter doctor를 터미널에 입력해보자
어우 뭐가 많이 나온다.
개발 가능한 플랫폼들을 보여준다.
우리는 Android 앱을 개발하고 싶은데 기분나쁜 두가지 이슈가 보인다.
flutter,다른것들은 제대로 설치 됐지만
Android개발을 위해 Android toolchain이 제대로 설치되어있지 않고
IOS, macOS 개발을 위해 Xcode가 설치되어 있지안다는 이슈이다.
우리는 Android 개발을 위해 Android toolchain을 설치하러 가보자
Android toolchain 설치
Android toolchain은 Android Studio에서 손쉽게 설치 가능하다.
android studio 메인 페이지에서 More Action-> SDK Manager를 선택하자
SDK는 최신버전으로 설치가 됬을것이다. (Android Studio 설치시)
SDK tool을 설치하러 가보자 (SDK Tools으로)
flutter doctor 명령어 입력시 봤던 모든 Tool들을 설치해주자
원래 한번에 설치해도 되는데 잘되는지 확인하기 위해 따로 설치해봤다.
먼저 위에있는 cmdline-tools을 설치하자!
다시한번 flutter doctor를 실행해보자
cmdline-tools 설치 이슈가 사라졌다
이제는 나머지 이슈인 Android SDK 플랫폼의 라이선스에 동의를 해야 개발 진행가능하다.
위 사진에 나와있듯이
flutter doctor --android-licenses 를 터미널에 입력한다.
입력시 나오는 모든 질문에 y를 입력하여 동의한다.
All SDK package licenses accepted 문구가 나오면 된다!!
다시한번 flutter doctor 입력시
예쁘게 뜬다.
이제 첫 flutter 프로젝트를 만들어보자
첫 flutter 프로젝트 만들기
위에서 Flutter 프로젝트 생성후 sdk 까지 설정해 준다음
다음 화면에서 flutter 프로젝트 메타정보를 입력해준다.
organization은 연습용이니 default값을 넣었다.
(앱 빌드시 중요한 정보이니 배포까지 고려한다면 적절하게 조직의 정보를 입력해주자.)
근데 대문자는 안된다;; 소문자로 바꾸자.
프로젝트가 잘 생성되었다.
Flutter는 dart 언어를 이용해 동작한다.
프로젝트의 lib 폴더안 main.dart 파일을 확인해보자
(없다면 프로젝트 구조를 project로 변경하자)
아직 Virtual Device가 없으니 Web(Chrome)으로 main.dart를 실행해보자
카운터 기능이 들어있는 훌륭한 첫 Flutter 어플리케이션이 실행됐다.
Android Device에서 Android 어플 실행하기
안드로이드 핸드폰이 없어 Android 개발을 못하는 사람을 위해 Android Studio에서는 Virtual Device를 지원한다.
컴퓨터에서 가상머신을 돌려 Android 핸드폰을 하나 주는거라고 생각하면 편하다.
본인은 Android 폰 (블로깅기준 갤럭시 ZFlip 3) 이 있기 때문에 직접 연결하여 디버깅 해도 되지만
귀찮아서 Virtual Device를 설치하려 한다.
Virtual Device를 추가 해보자
Shift + Shift 로 Device 검색후 Device Manager 를 누른다.
옆에 DeviceManager 창이 열리고 +를 눌러 새로운 Device를 만들어 준다.
-
하드웨어 선택하기
여기서 구글에서 만든 다양한 안드로이드 폰(하드웨어)를 선택할수 있다.
나는 Pixel 5 를 선택했다.
-
Android 소프트웨어(OS) 선택하기
다양한 운영체제 이미지(image:관련된 용어는 따로 알아보자)가 있지만 AndroidStudio에서 추천(Recommand)하는 이미지를 사용하자
또한 자신이 만든 어플리케이션에 구버전(옛 안드로이드 버전)에서도 동작하게 만들고 싶다면 꽤나 이전 버전의 안드로이드 버전을 선택해도 된다.
본인은 API Level이 30인 R를 다운로드후 진행했다. (아 1.2GB 나 되네;;)
-
Device 이름 작성
대충하고 넘기자 별로 상관없다.
finish! -
Device선택후 실행
이제 Refresh를 한뒤 안드로이드 시뮬레이터를 선택해준다.
(refresh안하면 안뜬다..)
이제 실행해보자
첫 어플 실행이라 시간이 좀 걸린다.
(Virtual Device에 별 SDK를 Install 하느라 시간이 걸리는것 같다.)Shift+Shift로 Running Device 를 열어 확인해보자
카운터 기능까지 개같이 잘된다.
