플러터로 앱 개발을 하고 싶다면
- Windows 10 이상 (64bit) 또는 MacOS 11버전 이상
- 램 8GB 이상
- 하드용량 최소 15GB 정도 필요합니다.
아니면 컴퓨터가 약간 힘들어할 수 있긴 한데 그건 컴퓨터 사정이니 일단 해보도록 합시다.
개발환경 셋팅부터 해봅시다.
1. Flutter SDK 설치
https://flutter.dev/docs/development/tools/sdk/releases?tab=windows
위 사이트에서 플러터 SDK 신버전을 다운받고 압축을 풀어줍니다.
저는 찾기 젤 쉬운 C드라이브에 다운받고 압축을 풀어보겠습니다.
실은 경로에 한글이나 띄어쓰기 없는 폴더가 에러가 적어서 그렇게 하는 것임
맥북도 마찬가지입니다 맥 버전 SDK 다운받아서 압축풀으십시오.
찾기쉽게 문서폴더 아니면 finder에서 cmd + shift + h 하면 나오는 '유저이름' 폴더에 압축푸는게 어떨까요.
▲ 저는 C드라이브 바로 밑에 압축 풀어봄
2. Android Studio 설치
구글에 검색해서 Android Studio 설치하면 됩니다.
거기 안에서 나중에 필요한 Android SDK, JDK 이런 것도 쉽게 알아서 해줌
m1 이후 맥북의 경우 다운로드 선택 메뉴에서 ARM어쩌구 써있는 걸로 다운받읍시다.
(참고1) 다운로드 눌러도 반응이 없으면 우측 상단에서 언어를 English로 바꾸면 됩니다.
(참고2) 플러터 SDK 이전버전을 쓰는 경우
Android Studio 버전을 플러터 SDK 출시 시기와 비슷하게 맞춰야 잘돌아갑니다.
예를 들어 플러터 SDK 2.8버전을 쓸거라면
https://developer.android.com/studio/archive 에서 Arctic Fox | 2020.3.1 버전을 다운받아 설치하는게 가장 좋습니다.
① 설치되면 Setup Wizard 이런거 하라는데 Next 눌러서 따라해주시면 됩니다.
② Standard로 할건지 Custom 할건지 선택지가 나오면 Standard로 합시다.
③ 색상 테마 결정은 알아서 하시고
④ 혹여나 AMD Hyper어쩌구, Intel HAXM 어쩌구 실패해도 일단 무시하고 Finish 누르면 끝입니다.
3. Android Studio 셋팅
코드짤 때 VScode 에디터 쓰고 싶어도
일단 Android Studio 셋팅은 해놓고 다른 에디터 쓰셔야합니다.
① Android Studio 처음 켜면 Plugins 메뉴가 있는데
거기서 Flutter 라는 플러그인을 찾아 Install 누릅시다.
테마도 바꾸고 싶으면 여기서 검색해서 설치하면 됩니다.
저는 atom one dark 어쩌구 쓰겠습니다.
(아니면 Android Studio 써봤던 유저들은 상단메뉴에서 File - Settings 찾으시면 Plugins 메뉴 나옴)
② More Actions 버튼 누르면 나오는 SDK Manager 눌러봅니다.
(이미 프로젝트 진행중이면 SDK Manager 버튼은 우측상단 어딘가에 있습니다)
▲ SDK Tools 탭으로 들어가서 Android SDK Command-line tools 부분체크하고 적용누르면 됩니다.
근데 그 전에 Android SDK Location 인풋 오른쪽에 Edit 눌러서 SDK 하나 아무거나 설치해야할 수 있습니다.
3. 환경변수 등록
▲ ① 윈도우 검색메뉴에서 '시스템 환경 변수 편집'을 검색합니다. (띄어쓰기 주의)
② 뭐 뜨는데 그럼 환경변수 버튼을 찾아서 누릅니다.
▲ ③ Path 어쩌구 누르고 편집을 누릅니다.
▲ ④ 새로만들기를 눌러서 님이 아까 압축푼 Flutter폴더 안의 bin 폴더의 풀 경로를 적어줍니다.
(제꺼 그대로 따라치면 컴퓨터 폭발하니까 님들 경로 쓰세요)
▲ ⑤ 풀 경로를 모르겠으면 아까 압축푼 flutter폴더의 bin 폴더 들어가서
상단에 주소창에 있는 문자 그대로 복붙하면 됩니다.
▲ ⑥ 잘 되었는지 테스트는 윈도우 검색메뉴 -> Powershell 검색 후 실행한 다음
flutter doctor
입력하고 엔터치면 쫘르륵 이상한게 뜹니다.
Flutter 앱개발에 필요한 요소들 설치 잘 되었는지 확인해주는 프로그램입니다.
이거보고 하나하나 알아서 추가해나가면 됩니다.
[X] Android license status unknown 에러가 뜨면
그 밑에 나오는 flutter doctor --android-licenses 이걸 터미널에 입력하고 호구처럼 다 동의하면 해결입니다.
[X] cmdline-tools component is missing 에러가 뜨면
위에서 Android Studio 에서 SDK Manager 눌러서 뭐 설치하라는거 설치가 잘 안된 것입니다.
[X] 크롬없다 에러는 크롬 브라우저 설치해줍시다.
앱 만들 때도 초반엔 웹브라우저로 빨리빨리 미리볼 수 있는데 그럴 때 편리함
[X] Android Studio 에러가 뜨면
Android Studio 설치안한 것임
① 런치패드에서 터미널 검색해서 오픈합니다.
② 님 터미널 이름이 zsh면
터미널에
touch ~/.zshrc
open ~/.zshrc
입력합니다.
님 터미널 이름이 bash면
touch ~/.bash_profile
open ~/.bash_profile
입력합니다
export PATH="$PATH:플러터폴더경로넣으셈/bin"③ 그럼 텍스트편집기가 뜨는데 위 코드를 복붙합니다.
설치경로넣으셈 대신 님이 방금 압축푼 flutter 폴더 경로를 넣으면 됩니다.
경로를 모르겠다고요?
flutter 폴더를 텍스트편집기로 드래그하셈
▲ 전 Documents폴더 안에 있어서 이런식임
끝은 /bin으로 끝나야합니다
④ 입력 다 했으면 꼭 저장하고 닫으십시오 저장안하면 클남
⑤ 잘 되었는지 체크하고 싶으면 다시 터미널에서
flutter doctor 입력하고 엔터치면 됩니다.
(참고) m1 이후 맥북들은 에러가 뜰 수 있습니다. 그럴 땐 터미널 종료, 컴퓨터 재시작하고
터미널 켜고 softwareupdate --install-rosetta 입력하면 됩니다. 그리고 완료되면 flutter doctor 해보셈
⑥ 그럼 플러터 앱개발에 필요한 여러 항복들을 알려줍니다.
[X] Android Studio 에러가 뜨면
Android Studio 설치안한 것이고
[X] Android license status unknown 에러가 뜨면
그 밑에 나오는 flutter doctor --android-licenses 이걸 터미널에 입력하고 호구처럼 다 동의하면 해결입니다.
[X] cmdline-tools component is missing 에러가 뜨면
위에서 Android Studio 에서 SDK Manager 눌러서 뭐 설치하라는거 설치가 잘 안된 것입니다.
[X] 크롬없다 에러는 크롬 브라우저 설치해줍시다.
[X] xcode, cocoapods 문제는
iOS개발에 필요한 것이고 약간 시간이 걸리니 나중에 심심할 때 설치하셔도 됩니다.
4. 새로운 Flutter 프로젝트 만들려면
셋팅 끝났으면 새로운 프로젝트 만들어봅시다.
Android Studio 켜서 새로운 프로젝트 만드셔야합니다.
▲ ① New Flutter Project 만들기 누름
(프로젝트 진행중이면 상단메뉴에서 File - New 누르셈)
▲ ② Flutter 잘 선택하고 전에 Flutter SDK 압축푼 경로 적으면 됩니다.
(점3개 버튼 누르면 쉬울듯)
▲ ③ 프로젝트 만들 폴더와 프로젝트명 입력
(영어소문자만 가능, 공백대신 _ 사용가능)
④ 다른 파일, 폴더는 다 필요없고 lib폴더 안의 main.dart에 코드짜면 됩니다.
⑤ 미리보기 띄우려면
에디터 상단에서 Device를 Chrome(Web)으로 설정하고 어딘가에 있는 초록 재생버튼 누르면 앱 실시간 미리보기 가능
크롬으로 이런게 뜹니다.
모바일 앱 맞는데 편의상 간단하게 크롬으로 띄워볼 뿐임
⑥ 저 에디터 복잡해서 싫은 분들은 VScode 에디터를 이용해도 됩니다.
VScode 설치하고 좌측 Extension 메뉴에서 Flutter 찾아서 설치하면 됩니다.
그리고 방금 만든 프로젝트를 폴더오픈해서 코드짜면 됩니다.
VScode 에서도 미리보기 띄우기 가능
⑦ 특정 Android Studio의 경우
var name = "안녕하세요" 이렇게 코드짜면
한글부분을 오타났다고 밑줄로 이상하게 잡아줄 수도 있습니다.
그게 귀찮을 수 있으니
상단 File > Settings > Editor > Inspections > 상단Profile을 Default로 선택 > Proofreading > Typo 부분을 체크해제합니다.
-
Add a note