[Flutter] 플러터 설치 실패는 없다. 초보자도 손쉽게 따라 할 수 있는 개발 환경 구축

안녕하세요. 어니어니입니다.

 

오늘부터 플러터를 공부해 나가며 같이 정보를 공유하고자 합니다.

 

개발환경구축을 보기쉽게 정리해두었으니 많은 참고바랍니다.

 

 

1. Flutter 소개

 

플러터란?

플러터는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크입니다.

구글에서 개발한 '다트' 라는 언어를 사용하며, 문법은 자바 또는 자바 스크립트와 비슷하다고 합니다.

 

한번의 코딩으로 여러 플랫폼용 앱을 만드는 크로스 플랫폼 개발 프레임 워크이며

안드로이드와 ios 뿐만 아니라 웹, 데스크톱 앱 개발도 가능합니다. 

또한, 훌륭한 개발도구 지원으로 (안드로이드 스튜디오, VScode) 보다 편리한 개발을 지원해줍니다.

 

 

2. 플러터 개발환경 구축

누구나 따라올수있도록 모든 설치과정을 첨부해두었습니다. 포기하지마시고 끝까지 따라와주세요.

 

 

1. 플러터 웹사이트

https://flutter.dev/

Flutter - Beautiful native apps in record time

위 링크에 접속하시면 아래와 같은 메인 화면이 나오게 됩니다. 우측 상단 'Get Started'를 클릭합니다

 

 

 

2. 운영체제 선택 및 SDK 설치

플러터는 크게 윈도우, 리눅스, macOS를 지원합니다. 자신의 운영체제를 선택하여 줍니다.

 

선택하셨다면 아래와 같은 화면으로 넘어가게 됩니다. 화면에 표시해둔

 

Flutter_windows_2.2.3-stable.zip을 선택하여 다운로드를 받아줍니다.

 

 

다운로드가 완료되었다면 이제 압축을 풀어줘야하는데요. 

 

압축을 풀어줄 경로는 권한이 높은 C:\ProgramFiles같은 경로는 피해줍니다.

 

저는 C:\Study라는 폴더를 하나 생성했습니다.

 

 

3. 환경변수 등록

다음은 환경변수를 등록해줄 차례입니다. 이와 같은 작업을 하는 이유는 운영체제에 환경변수를

등록해둔다면 어디서나 플러터 명령을 사용 할 수 있기 때문입니다.

* 플러터 명령파일은 폴더아래 bin 폴더에 있습니다. *

3-1. 윈도우 검색챙에 시스템 환경 변수 편집을 입력후 클릭합니다.

 

3-2. 고급 탭에 환경변수(N)을 클릭해줍니다.

 

3-3. 환경변수창에서 'Path'를 선택후 '편집(E)'를 클릭해줍니다.

 

3-4. '편집'을 클릭하면 아래와 같은 창이 나타나게 됩니다. 이번에도 역시 '편집'을 클릭하여

플러터 압축파일을 풀어둔곳 경로에 bin폴더를 선택해줍니다.

ex) C:\Study\flutter\bin

 

 

4. 환경변수 설정 확인

환경변수 설정이 끝났다면 이제는 확인해볼 차례입니다.

4-1. 윈도우 검색창에 'cmd'를 검색합니다. 검색결과의 '명령 프롬포트'를 클릭합니다.

 

4-2. 명령 프롬포트에서 ' flutter --version ' 를 입력한뒤 위와 같은 화면이 정상적으로 출력된다면 설정 성공입니다.

 

 

5. IDE 설치

플러터는 안드로이드 스튜디오와 비쥬얼스튜디오 코드에서 작업이 가능합니다. 

저는 안드로이드 스튜디오를 IDE로 선정하여 설치 및 세팅도 안드로이드 스튜디오로 진행하겠습니다.

 

https://developer.android.com/studio?gclid=Cj0KCQjw7MGJBhD-ARIsAMZ0eetPlDcFSf3jfh4JfJOABVk7hJxa8Gv021sCOvuI_E0VRb24JHcV_TYaAsPoEALw_wcB&gclsrc=aw.ds 

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

위 첨부해드린 링크로 들어가게 되시면 아래와 같은 화면이 나타납니다. 

 

화면 중앙에 'Download Android Sudio'를 클릭하여 줍니다.

 

5-1. 안드로이드 스튜디오 설치

 

 안드로이드 스튜디오 설치는 어렵지 않습니다, 순서대로 잘 따라와 주세요.

1.  ' Next >'

2. ' Next >'

3. 설치 경로설정 ' Next >'

4. 아이콘 생성 ' Next >'

5. 설치완료 'Finsh'

 

 

 

 

6. 안드로이드 스튜디오에서 플러터 플러그인 설치

거의다 왔습니다. 포기하지말고 조금만 더 힘내봅시다.

6-1. 안드로이드 설치가 끝나면 위와 같은 창이 나오게 되는데 저희는 처음 세팅이 기준이니 

'Do Not import Settings' 를 체크해주고 'OK' 를 눌러줍니다.

 

6-2. 'OK' 를 누른후 화면입니다.

6-3. 기본적인 설정을 하게되는 화면입니다. 고민하지말고 ' Next '

6-4. 기본형으로 설치하면 되겠습니다. ' Next '

6-5. 원하시는 배경테마를 설정해 줍니다.  ' Next '

6-6. 필요한 컴포넌트들이 설치되게 됩니다. 약 5분정도 소요된거 같네요. ' Finsh ' 버튼을 누르면 설치가 시작됩니다.

6-7. 설치가 완료되었습니다. ' Finsh '

6-8. 컴포넌트 설치가 완료되면 위와 같은 화면이 나타납니다.

1. 왼쪽에 'Plugins'를 클릭  

2. 돋보기 옆 검색창에 'Flutter' 검색

3. 'Install' 클릭 

 

6-9. 설치가 완료되면 'Install' -> 'Restart IDE'로 바뀌게 됩니다. 'Restart IDE' 버튼을 눌러 재실행 합니다.

 

6-10. 환경구축 완료입니다. 정상적으로 설치가 되었다면 중앙에 New Flutter Project가 추가된것을 확인하실수있습니다.

 

7. 플러터 및 다트 경로설정

7-1. 플러터 탭에서 'Flutter SDK path'를 아까 설치후 압축을 풀어준 Flutter 폴더를 지정해준다.

7-2. 다트SDK 설정을 해주어야합니다. 

경로: C:\Study\flutter\bin\cache\dart-sdk 까지 추가해주시면 되겠습니다

 

7-3. 원하는 경로와 프로젝트명을 설정해주고 ' Next '

 

 

7. 마무리

오늘은 플러터 환경구축에 대해 알아보았습니다. 

앞으로의 공부할 내용들은 ' 오준석의 플러터 생존코딩' 이라는 책을 토대로 좋은 내용을 많이 공유하겠습니다.

긴글 읽어주셔서 감사합니다.