[Flutter] 시작하기 + 설치 + Editor 설정 방법

삼성 SDS Smart Hackathon에 대학생 봉사단으로 참여하며 내가 맡게된 고등학생 팀이 Dart언어와 Flutter프레임워크를 이용하여 앱개발을 하기로 한다고 하여, 이번 기회에 나도 같이 배우며 진행하기로 하였다..! 너무너무 열심히 하려고 하는 친구들 같아서 확실한 도움을 줄 수 있도록 열심히 공부할거다..!(๑•̀ㅂ•́)و✧

 

 

💡 Flutter Framework

우선, flutter 프레임워크에 대하여 설명하면, 요즘 아주 아주 핫한 아이라고 할 수 있다. 구글에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크이다.

 

 

💡 Flutter의 장점

flutter의 최대 장점은 크로스플랫폼으로 개발이 가능하다는 점이다. android, ios 등 플랫폼의 제한 없이 함께 개발이 가능하다는 점이 flutter가 내밀고 있는 주력 강점이라고 할 수 있다.

android와 ios든,,, 어플 개발이 전혀 없는 나에게 어쩌면 더 좋은 framework라는 생각이 들었다.

 

 

💡 Flutter 설치하기 (window 환경)

flutter 설치에 대한 모든 내용은 flutter에서 제공하고 있는 내용을 재해석하여 작성하였다.

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

Windows install

#1 Flutter SDK 다운받기

홈페이지 다운 링크와 git clone으로 다운 받는 것 모두 가능하다. 압축파일을 다운받고 C드라이브의 src폴더를 생성하여 flutter 파일의 경로를 지정하여준다.(C:\src\flutter) 경로 지정은 본인 자유롭게 할 수 있다. 그러나 C드라이브의 Programfils와 같이 권한이 필요한 곳에 경로를 지정하지 않도록 주의한다.(C:\Program Files\)

flutter 폴더 안의 flutter_console을 실행시키면

이렇게 콘솔 창이 실행된다.

이 콘솔 창을 윈도우 기본 cmd 창에서도 실행시키고 싶다면

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:
From the Start search bar, enter ‘env’ and select Edit environment variables for your account.Under User variables check if there is an entry called Path:If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.
You have to close and reopen any existing console windows for these changes to take effect.

△ 위의 내용은 flutter 홈페이지의 내용을 그대로 가져온 것이다. 영어로 되어있다 보니 'env'와 같은 내용은 한국어의 windows에서 찾기 힘들었다ㅠ_ㅠ 도대체 env가 뭔지,, 한참 해맸다,,.. env는 한국 윈도우에서 '계정의 환경 변수 편집'!!

 

 

제어판의 '계정의 환경 변수 편집'에서 파일 경로(C:\src\flutter\bin)를 추가해주어야 한다. 

 

추가해주면 이렇게 window 기본 cmd창에서도 flutter를 실행시킬 수 있다.

지정해준 경로에서 `flutter doctor`를 type하면 된다.

다른 건 다 초록색 체크 표시가 뜨는데 나는 아이폰을 사용하고 있기 때문에 인증된 안드로이드 폰이 없다고 경고 표시가 뜬다.

emulator를 사용하면 문제 없기 때문에 저 부분은 무시하고 건너뛰어도 된다.

 

#2. Android Vertual Machine(AVM) 설치

Android Device가 없기 때문에 AVM을 설치하여 emulator를 이용하여 어플 구동을 확인하여야 한다.

Android Studio의 Configure의 AVD Manager에서 AVD를 생성한다.

System image를 선택하고, AVM를 creat하면 다음과 같이 안드로이드 디바이스가 나타난다.

이제부터 여기서 내가 만든 어플의 구동을 확인할 수 있는 것이다.

 

#3 Enable Desktop Support

cmd창에 다음을 입력한다. 

flutter config --enable-windows-desktop

 

 

💡 Editor(VS Code) 설정하기

editor 설정에 관한 모든 내용은 다음 링크를 참고하여 작성하였다.

https://flutter.dev/docs/get-started/editor?tab=vscode 

Set up an editor

 

VS Code이외에도

• Android Studio and IntelliJ
• Visual Studio Code
• Emacs

등의 editor를 제공하지만 나는 VS Code를 이용할 예정이다.

 

 

#1 VS Code에서 Flutter Plugin을 설치한다.

 

 

#2 Flutter Doctor을 실행시킨다.

 

이렇게 하면 Flutter SDK와 AVM을 모두 설치하고 Editor설정까지 완료하여 어플을 만들기 위한 준비작업이 끝난다.

그래서 다음 포스팅은 직접 test 앱을 만들고 구동시켜보기로 하겠다!