우분투[6] - 플러터 설치하기

안녕하세요.

오늘은 우분투에 플러터를 설치해보겠습니다.

 

 

1. 플러터란?

플러터(Flutter)란 모바일 어플리케이션을 개발할 수 있도록 도와주는 프레임워크입니다.

안드로이드와 ios를 동시에 빌드할 수 있는 하이브리드 프레임워크이며

동류의 리엑트 네이티브와는 달리 네이티브 코드로 코딩할 수 있어 유지보수에 유리합니다.

 

 

2. 플러터 SDK 가져오기

우선 플러터 개발환경을 다운로드하도록 하겠습니다.

다음과 같은 명령어를 입력하여 최신 플러터를 다운받아주세요.

git clone -b stable https://github.com/flutter/flutter.git

이제 다음 명령어를 입력하여 플러터 개발킷의 경로를 설정해줍니다.

export PATH=$PATH:`pwd`/flutter/bin

이제 지금 열려있는 터미널 상에서 플러터를 사용하실 수 있습니다.

만약 터미널을 중간에 종료하신다면 경로를 재설정해주세요.

 

 

3. 플러터 업그레이드 하기

이제 플러터를 업그레이드 해주겠습니다.

다음과 같은 명령어를 입력해주세요.

sudo apt-get install curl

이제 다음과 같은 명령어를 입력하여 플러터를 업그레이드 시켜주세요.

flutter upgrade

 

 

4. 플러터 설정하기

이제 플러터를 사용하기 위한 설정을 해보겠습니다.

다음 명령어를 입력하여 플러터 닥터를 실행해주세요.

flutter doctor

초록색 체크표시가 있지않은 항목은 수정을 해줘야합니다.

우선 아래 명령어를 입력하여 lib32stdc++6의존성을 설치해줍니다.

sudo apt install lib32stdc++6 

 

 

4-1. 안드로이드 스튜디오 설치하기

첫번째 항목을 해결하기 위하여 안드로이드 스튜디오를 설치하겠습니다.

 

다음과 같은 명령어를 입력하여 안드로이드 스튜디오 설치 PPA저장소를 추가해주세요.

sudo add-apt-repository ppa:maarten-fonville/android-studio

이번엔 패키지 리스트를 업데이트해줄게요.

sudo apt update
sudo apt-get update

 

다음 명령어를 입력하여 안드로이드 스튜디오를 설치해줍니다.

sudo apt-get install android-studio

이제 안드로이드 스튜디오를 실행시켜주세요.

다음과 같은 화면이 뜨면 두번째 옵션을 선택해주세요.

가만히 두시면 설치 프로세스가 진행됩니다.

계속 [Next] 버튼만 눌러주시면 됩니다.

마지막에 [Finish] 버튼을 눌러서 설치를 마무리해주세요.

 

이제 다시 플러터 닥터를 실행시켜봅니다.

이번엔 라이센스 동의가 필요하다네요.

다음 명령어를 순서대로 입력해주세요.

cd $HOME/flutter/bin

./flutter doctor --android-licenses

쭉쭉 뭐가 진행되다가 동의를 묻는 항목들이 뜹니다.

y를 입력하신 후 엔터를 눌러주세요.

자 이제 다음으로 넘어갈게요.

 

4-2. 안드로이드 스튜디오에 플러터 플러그인 설치하기

안드로이드 스튜디오를 실행시켜주세요.

우측 아래 Configuration 버튼을 누르신 후 Plugins 버튼을 눌러주세요.

플러터 플러그인을 검색하신 후 설치해주세요.

다트 플러그인도 설치할거냐고 물어보는데 Yes를 눌러주세요.

이제 안드로이드 스튜디오를 재시작합니다.

 

다시 플러터 닥터를 실행시켜주세요.

이제 얼마 안남았네요.

 

4-3. 비쥬얼 스튜디오 코드에 플러터 플러그인 설치하기

비쥬얼 스튜디오 코드를 실행시켜주세요.

좌측 하단의 플러그인 스토어 버튼을 눌러주신 후

flutter를 입력하시고, 설치해주세요.

다시 플러터 닥터를 실행시켜주세요.

이제 마지막이군요.

 

4-4. 에뮬레이터 설정하기

안드로이드 스튜디오를 실행시켜주세요.

[Start a new Flutter project]를 눌러줍니다.

Next를 누르시다 보면 다음과 같은 화면이 나옵니다.

플러터 SDK의 경로를 설정해줄게요.

OK를 누르신 후 Next, Finish를 눌러주시면 개발환경이 생성됩니다.

이제 우측 상단의 AVD Manager를 눌러주세요.

새로운 기기를 만들어줍니다.

원하는 기기를 선택하신 후 다음으로 넘어갑니다.

원하는 안드로이드 버전을 다운로드 받은 후 다음으로 넘어가주세요.

이제 디버깅을 해보겠습니다.

다음 화면에서 삼각형 버튼을 눌러주세요.

가상 머신이 실행되면

메인화면에서 F5를 눌러 디버깅을 진행 해주시면 됩니다.

 

 

5. 비주얼 스튜디오 코드에서 플러터 프로젝트 생성하기

비주얼 스튜디오 코드를 실행시켜주세요.

[ctrl + shift + P]를 입력하셔서 커맨드 팔레트를 열어주세요.

Flutter:New Project를 입력하신 후 엔터를 눌러주세요.

프로젝트 폴더명을 입력하신 후 엔터를 눌러주세요.

이제 프로젝트 폴더를 생성 할 디렉토리를 선택해줍니다.

프로젝트 폴더를 생성하시면 하단에 다음과 같은 안내창이 뜹니다.

[Locate SDK] 버튼을 눌러주세요.

다음과 같이 FlutterSDK 가 설치된 장소를 선택해줍니다.

이제 비쥬얼 스튜디오 코드를 재시작해주세요.

이제 다음과 같이 프로젝트 폴더가 생성되었습니다.

main.dart 파일이 열려있을텐데 F5를 눌러서 디버깅을 해봅니다.