[Flutter] Flutter 1 - 설치부터 빠르게

leteu

·

2023. 3. 4. 21:16

지금 회사에서 프론트앤드 개발하면서 앱까지 개발하게 됐다.

"Vue 할 줄 아니 nativescript하면 되겠네" 싶었는데 맘에 안 들어서 플러터 해보려고 한다.

플러터가 뭐 검색하면 잘나오니 이거 써보겠다.


#1 Flutter SDK 설치

https://docs.flutter.dev/get-started/install

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

플러터 사이트 들어가서 자신에 맞는 OS 찾아 설치해줍시다.

필자는 Window 씁니다.

 

 

다운로드가 완료되었으면 아무 곳이나 찾기 쉬운곳에 압축 풀어주시면됩니다.

 

 

C:\Program Files같은곳 빼고 해달라고 합니다.

 

맥북도 아무 곳이나 설치하시면 됩니다.

 

 

#2 Flutter 환경 변수 설정하기

 

윈도우 검색창에 환경 변수 검색해서 들어가줍니다.

 

 

 

사용자 변수에 Path 눌러줍니다.

 

 

새로 만들기 눌러주시고 아까 Flutter 압축 풀었던곳에 경로 적어준뒤 뒤에 \bin 붙여줍시다.

 

flutter doctor

CMD 혹은 PowerShell을 켜주신뒤 위 명령어를 입력해 줍시다.

 

 

안드로이드 뭐시기 없다고 합니다. 설치하러 가봅시다.

 

 

#3 Android Studio 설치

 

Download Android Studio and SDK tools  |  Android Developers

<!-- hide description -->

developer.android.com

링크가 의심스럽다 하시는 분들은 따로 구글에 android studio 설치 검색하시면 젤 위에 있습니다.

들어가셔서 설치 눌러주시면됩니다.

 

 

1번 눌러주시고 맨밑으로 내려서 2번 눌러주고 3번 눌러줍시다.

 

 

따라하시는 분들은 전부 Next 눌러서 넘겨주시면 됩니다.

 

#4 Android Studio 세팅

 

처음 Android Studio 켜시면 대충 이런 비슷한 화면일 겁니다.

Plugins 눌러서 기본적으로 설치해줄 거 설치해줍시다.

 

 

Plugins 들어가셔서 Flutter 검색해주시면 Flutter 맨 위에 나옵니다. Installed 눌러서 설치해줍시다.

 

 

설치 진행하시다 보면 Dart 머시기 설치해야 한다고 나옵니다.

Flutter는 Dart 언어를 사용하는 GUI 프레임워크입니다.

Install 눌러서 같이 설치해줍니다.

 

 

설치가 다 되면 재시작해달라고 합니다. 재시작해줍시다.

 

#5 안드로이드 SDK 설치

 

More Actions를 누르시면 SDK Manager 있습니다. 눌러줍니다.

 

 

체크하고 ok 눌러줍니다.

 

 

다시 CMD 켜주시고 flutter doctor 해줍니다.

 

 

이번엔 뭐 라이센스가 안됐다고 합니다. 하라는대로 해줍시다.

flutter doctor --android-licenses

위 명령어 입력

 

y 치고 엔터 반복해줍시다.

 

 

계속 y 치고 엔터 하시다 보면 다 설치됩니다.

다시 flutter doctor

 

 

No issues found! 나오면 됩니다.

 

#6 프로젝트 생성 하기

 

New Flutter Project 눌러주시고

 

 

옆에 메뉴에서 Flutter 찾아가셔서 ... 눌러서 Path 등록해줍시다.

 

 

아까 설치했던 경로 잘 찾아가주시고 OK

 

 

Next 누르고 프로젝트 초기 세팅하고 Finishi 누르면 프로젝트가 생성됩니다.

 

좌측에 lib 폴더에 main.dart 에서 작업 할 겁니다.

 

감사합니다.