[Flutter] Program Import - (week 1)

Program

Flutter를 사용해 개발하기 위해서 크게 필요한 프로그램은 다음과 같다.

• Flutter : Android와 iOS앱을 하나의 코드로 구현할 수 있도록 도와주는 프레임워크
• VSCode : 코드를 작성할 때 사용하는 에디터
• Android Studio : Android 앱을 개발하기 위해 필요한 IDE (에뮬레이터 포함)
• XCode : iOS 앱을 개발하기 위해 필요한 IDE (에뮬레이터 포함, mac 환경일 때)

개발환경은 Winodws10을 기준으로 이후 모든 글을 작성한다.

 

Flutter

일반적인 프로그램은 exe 파일을 실행하여 설치가 진행되는데 Flutter의 경우 조금 다르기 때문에 설치하는데도 신경 쓸 필요가 있다.

 

Download

우선 flutter를 설치할 폴더를 생성한다. 폴더의 경로에 한글이나 공백이 들어갈 경우 인식하지 못해서 에러가 발생하기 때문에 에러를 방지하기 위해서 다음과 같이 설치를 진행한다.

1. src 폴더생성

C드라이브 바로 아래에 src 이름으로 폴더를 생성한다.

2. zip 다운로드

Flutter 다운로드 링크

해당 페이지에서 Flutter zip 파일을 다운로드한다. 

압축을 해제하는 위치의 경로가 중요하기 때문에 편의를 위해서 압축파일을 아까 만들어둔 src 폴더에 이동시킨 후 압축을 해제한다.

 

압축을 해제한 폴더의 경로가 다음과 같다면 다음 단계로 넘어간다.

 

3. 환경 변수 설정

환경 변수 설정은 Flutter를 어디서든지 사용 가능하도록 하기 위한 절차이다.

압축을 풀어둔 폴더에서 다음 경로를 따라간다.

 

c:\src\flutter\bin 

 

환경 변수를 등록하면 해당 경로에 있는 파일들을 어디서든 접근하고 실행할 수 있게 된다.

 

 

위 경로를 복사해 두고 환경 변수 설정으로 이동한다.

환경 변수는 '내 PC > 우클릭, 속성 > 고급 시스템 설정 > 고급 탭 ' 에 보면 '환경 변수'를 찾을 수 있다.

환경 변수 창을 열고 (PC이름)에 대한 사용자 변수

중 Path를 찾아서 편집을 눌러 창을 열고 새로 만들기를 통해서 복사해 둔 경로를 붙여 넣어 경로를 추가해 준다.

그리고 환경 변수가 잘 등록되었는지 확인을 위해 cmd 창을 열어 flutter --version 명령어를 입력한다.

이 처럼 문구가 뜬다면 제대로 설치가 된 것이다.

 

VSCode

Visual Studio Code는 코드를 작성할 때 사용하는 편집 툴로 가벼우면서 여러 편의 기능도 사용할 수 있는 툴이다.

 

VSCode 설치 링크

VSCode 설치는 일반 프로그램 설치와 동일하게 진행하면 된다.

 

VSCode의 설치가 끝났다면 Flutter 개발에 필요한 확장 프로그램도 설치해 준다.

확장 프로그램 마켓 탭에서 Flutter를 검색 후 해당 프로그램을 설치해 준다.

이후 Dart를 검색 후 마찬가지로 설치해 주면 되는데 Flutter를 설치하면 자동적으로 함께 설치되지만 혹시 설치가 안된 경우를 대비해 설치가 되었는지 확인하고 안 되었다면 추가로 설치해 준다.

 

 

Android Studio

안드로이드 스튜디오 설치 링크

 

해당 링크에서 파일을 다운로드하고 프로그램을 설치해 준다. 간혹 설치 시 SDK 문제가 발생할 수 있는데 이때는 구글링을 잘해서 문제를 해결하도록 한다.

 

추가로 설치가 필요한 툴이 있다.

 

Android Command-line Tools

Flutter에서 Android에 명령을 내리는데 필요한 툴이다. 

Android Studio를 실행 후 메뉴를 찾아서 SDK Manager를 실행시킨다.

 

Android SDK > SDK Tools 탭에서 Android SDK Command-line Tools를 설치한다.

 

Android Virtual Devices

앱을 개발 시 실제 휴대폰을 연결하여 개발을 진행할 수도 있지만 가상 장치를 이용하여 개발을 할 수도 있다.

SDK Manager를 열었던 메뉴를 다시 보면 그 밑에 Virtual Device Manager가 있는데 이걸 실행시켜 준다.

 

Create Virtual Device를 눌러 설치를 진행한다.

 

가상 장치는 기본 상태인 Phone > Pixel 2를 선택하고 Next로 다음으로 넘어가준다.

 

그리고 Release Name은 Q를 선택해 준다. 다운을 받아야 하는 상태라면 다운을 받은 후 선택해 준다.

기본적으로 R로 선택되는데 이 버전은 가상 장치에서 문제가 발생하는 경우가 있기 때문에 Q를 선택해 준다.

 

 

마지막 창에서는 기본 설정 그대로 진행하면 되기 때문에 Finish를 눌러 설치를 완료한다.

 

설치가 끝나면 다음 창이 뜨면서 현재 설치된 가상 장치를 확인할 수 있다.

 

Android Liceses

flutter에서 사용할 수 있도록 안드로이드 스튜디오 라이선스를 설정해 준다.

cmd 창을 열고 flutter doctor 명령어를 입력하면 문제가 되는 부분을 확인할 수 있다.

 

라이선스 문제를 확인하려 했는데 다른 문제도 확인해 볼 수 있었다.

 

해당 문제는 flutter 3.7.9 version에서 발생하는 걸로 보인다.

 

flutter channel master

flutter upgrade

 

위 명령어를 실행해서 flutter를 업그레이드한 후 다시 flutter doctor를 실행시켜 보니 해당 문제는 해결되었다.

 

이번에는 [!] 문제를 해결한다.

 

flutter doctor --android-liceses 명령어를 실행시킨다.

 

또 문제가 발생한다.

설치한 파일에 문제가 있는 거 같아 보인다. 일단 하라는 대로 android cmdline-tools를 삭제 후 다시 설치해 본다.

재설치 후에도 동일한 에러가 발생해서 이번엔 버전을 낮춰서 설치해 본다.

현재 설치된 버전은 9.0(latest)으로 sdk manager에서 현재 설치된 cmdline-tools를 제거하 show package details를 체크한 다음 8.0으로 설치 후 다시 진행해 본다.

 

드디어 문제가 해결되었다. 이제 라이선스에 대한 동의를 묻는데 모두 y로 대답을 해주면 완료된다.

제대로 설치되었는지 확인을 위해서 다시 flutter doctor를 실행시켜 확인해 본다.

 

모든 문제가 해결된 걸 확인할 수 있다.