며칠 전부터 핸드폰으로 AR 사진 찍는 거 하고 싶어서 고민하는 중이었는데 마침 좋은 기회로 flutter 공부를 시작할 수 있어서 감사하다.

개인적으로는 계속 백엔드 위주로 작업했고, 프론트엔드에서 하는 화면 구성은 퍼블리셔분들이 다 해주셨다. 프론트엔드 화면 구성에 대한 부담감이 있었다. 그 1px의 오차를 발견할 수 없는 타고난 무덤덤 공대생이라 엄두도 낼 수 없었는데 시작이 반이라는 마음으로 시작하게 됐다. 

예전에는 이클립스 하나 압축 푸는데도 3시간씩 걸리고 버벅 거렸던 것 같은데 어제 밤 11시 쯤 시작한 것 치고 1시쯤 프로젝트 생성 및 초기 프로젝트 실행까지 해낸게 내심 신기하다. 맨날 제자리거름 같아도 뭔가 늘긴 늘었던 4년의 시간이었나보다. 기특해 나란 녀석. 

flutter를 시작하고 기본은 회사 프로젝트로 기틀을 잡고, ARCore 공부도 하고, 6개월 후에는 ARkit도 공부해보고 싶다. 평소에 하고 싶은게 없는 사람인데 오랜만에 흥미로운 작업을 시작하게 된 것 같아 기분이 뿌듯하다.

아 회사에서 하는 프로젝트 몇 개 하고 나면 flutter 개발자로 이직할 수 있으려나. 기대되네~ 

 

안드로이드 스튜디오에서 우측 상단에 핸드폰+안드로이드 가 그려진 아이콘을 클릭.

 

이렇게 Virtual Device를 추가할 수 있는 화면이 나옵니다.

Create Virtual Device 클릭.

 

잘 몰라서 그냥 기본으로 선택되어 있는 'Pixel2' 를 선택할게요~

 

안드로이드 버전은 Q버전으로 하겠습니다. 다운로드! Download.

 

Q 우측의 Download를 누르면 아래처럼 다운로드를 해와요!

설치 완료. Finish.

 

다시 이전 창으로 돌아가서 Q 선택 후 Next.

 

Finish.

 

하면 아래처럼 Virtual Device 가 추가된 것을 확인할 수 있습니다!

Pixel 2 API 29 우측의 재생 버튼을 클릭하면 안드로이드 에뮬레이터가 실행됩니다. 

 

 

에뮬레이터를 실행하면 안드로이드 중앙 상단에 Android SDK built for x86 (mobile) 이 추가된 것을 확인할 수 있습니다.
우측 재생 버튼을 누르면 Running. 실행됩니다. 

 

하단 파란색 + 버튼을 클릭하면 푸쉬한 만큼 숫자가 증가하는 것을 확인할 수 있습니다. 

 

고생하셨습니다~ 다음엔 뭘 해야되나. 고민을 좀 해봐야겠네요~

 

 

 

프로젝트를 생성해봅니다. 두근두근.

Create New Flutter Project. 

 

Flutter Application. 선택 후 Next.

 

Project name : 프로젝트 이름
Flutter SDK path : (~\flutter\bin) 설정해줬던 그 flutter 경로로 설정하면 됩니다. (참고:hea1peak.tistory.com/216)

 

flutter 시작하기 (flutter 설치/SDK 환경변수 Path 설정/flutter doctor)

플러터? 플루터? 시작하기 웹 개발을 한 지 3년이 넘었다. 이제 이 회사에서 하는 웹 프로젝트는 거의 거기서 거기인 것 같다. 이번에 회사에서 플루터로 앱 개발을 하게 되는데 백엔드 및 API 개

hea1peak.tistory.com

Project loaction : 프로젝트 생성할 경로
Description : 설명~ 
적당히 입력하고 Next.

 

패키지명을 셋팅해주고 Finish. ( + com.new.test.flutterapp 이라고 패키지명을 했더니 new가 JRE 사용언어라 에뮬레이터를 못 띄우는 오류가 발생했다. com.test.flutterapp0 으로 변경ㅠㅠ 혹시 이 글을 보고 같은 실수가 반복되지 않길 바라며 추가합니다.)

 

프로젝트를 생성합니다.

 

프로젝트 생성 후 다음과 같이 화면이 뜨면 정상적으로 flutter 프로젝트 생성 완료.

 

다음 게시물에서는 에뮬레이터로 어플을 구동하는 부분을 셋팅해보겠습니다! AVD Manager~

 

안드로이드 스튜디오를 열면 아래 이미지처럼 초기 화면이 뜬다.

하단의 'Configure'를 클릭하여 'Plugins' 클릭.

Plugins에서 flutter를 검색하고 install 버튼을 눌러 설치.

 

동의 화면이 나오면 Accept.

 

Accept 후 Flutter를 쓰려면 Dart 가 필요합니다~
Dart도 함께 설치하겠습니까? 넵! Install.

 

설치 완료되면 'Restart IDE' 안드로이드 스튜디오를 재시작하십시오.

 

끄기 전에 Dart를 보면 이렇게 잘 설치되어 'Restart IDE' 가 동일하게 뜨는 것을 확인할 수 있습니다.

 

Restart IDE 버튼 클릭 -> Restart.

 

안드로이드 스튜디오에서 flutter 개발 환경 구성이 끝난 것 같네요! 

고생하셨습니다~ 

다음 시간에는 flutter 프로젝트를 생성해보겠어요!


E:\02_flutter\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version 10.0.17134.1967], locale ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] Connected device (2 available)

flutter doctor --android-licenses 실행하고 라이센스 동의를 위해 모두 y + Enter. 

모두 y 완료되면 

All SDK package licenses accepted. 완료.

이전에 1개 남았던 이슈가 모두 해결되었습니다~ 

 

안드로이드 스튜디오가 노트북에서 돌아가려나.. 넘 무거운 것..

developer.android.com/studio

 

Download Android Studio and SDK tools  |  Android 스튜디오

developer.android.com

 

사이트에 들어가서 다운로드를 받습니다. DOWNLOAD ANDORID STUDIO.

 

다운로드 받은 파일을 실행. Next.

Next.

Next.

Install.

Next.

Finish. 

안드로이드 스튜디오 설치 완료!


안드로이드 스튜디오를 실행합니다.

안드로이드 스튜디오 기존 셋팅이 없기 때문에 'Do not import settings' 선택 후 OK.

구글이랑 공유할 거냐. 아니. Don't send.

Welcome 인사. Next.

Standard 선택. Next.

 

취향에 따라 모드 선택 후 Next. (저는 Light 를 사용)

 

SDK 설치 폴더 + JDK 경로 등을 알려줍니다. 이대로 설치~ Finish.

 

설치를 진행합니다.

Finish.

실행 후 설치 완료!


 

이전 게시물에서 2개였던 이슈가 1개로 줄었습니다~ 기쁜 소식! 

다음 게시물에서는 마지막 이슈를 해결해보겠습니다!

플러터? 플루터? 시작하기

웹 개발을 한 지 3년이 넘었다. 이제 이 회사에서 하는 웹 프로젝트는 거의 거기서 거기인 것 같다. 
이번에 회사에서 플루터로 앱 개발을 하게 되는데 백엔드 및 API 개발을 맡게 되었다.
앱개발자는 따로 있지만 공부용으로 그 개발에 참여하려고 한다. 아직 개발 시작도 하지 않아서 그램으로 개발을 하려고 하는데 그램이 안드로이드 스튜디오를 감당할 수 있을지 걱정이다. 우선 6개월정도 하고 올해 9월쯤 M1? M2? 맥북 나오면 구매해야지! 그 때까지 화이팅~


 

1. Flutter SDK 설치 (For. 윈도우) 

아래 링크로 들어가서 자신의 OS와 맞는 설치 파일을 다운로드!
flutter-ko.dev/docs/get-started/install/windows

 

윈도우에서 설치

 

flutter-ko.dev

윈도우/맥/리눅스 가 있다. 나는 윈도우 선택!

 

Flutter SDK 다운로드에 있는 최신 릴리즈를 다운로드 받는다. 

 

시스템 요구 사항에 다음과 같은 요구사항이 있다.

 

  • 운영 체제: 윈도우7 SP1 이상 (64-bit)
  • 저장 공간: 400 MB (IDE나 개발 도구 용량은 별도).
  • 도구: Flutter는 윈도우 환경에서 아래 도구가 필요합니다.
    • 윈도우 파워셸 5.0 또는 그 이상 버전 (윈도우10에 내장되어 있음)
    • Git for Windows 2.x, 설치하실 때, Use Git from the Windows Command Prompt 옵션을 설정해주세요.
    • 윈도우용 Git이 이미 설치되어 있다면, git 명령을 명령 프롬프트나 파워셸에서 실행되는지 확인하세요.

운영체제와 저장공간은 되었는데 도구에 대해서는.. Git for Window가 없음. 될지 안될지 모르지만 우선 스킵하고 진행.

 

다운로드 후 원하는 경로에 zip 압축 파일을 푼다. 

 

 

설치 완료!


2. 환경변수 Path 설정! 

윈도우메뉴 버튼을 누르고 '시스템' 을 검색하면 하단 이미지와 같이 시스템 환경 변수 편집이 나온다. 클릭.

 

 

환경 변수 클릭

 

Path를 선택하고 편집

새로만들기 - 압축파일을 푼 경로 (~\flutter\bin) 입력 - 확인 

환경 변수 Path 설정 완료!

 


3. flutter doctor 로 설치 확인

압축을 푼 경로의 flutter를 보면  flutter_console.bat 파일이 있는데 이 파일을 연다.

 

다은과 같은 콘솔창이 열린다.

 

명령어 flutter doctor 입력

위와 같은 이슈가 나온다.

Flutter는 2.0.4 버전으로 정상적으로 설치 완료!

다음편에서는 안드로이드 스튜디오를 설치해보겠습니다~

+ Recent posts