Program Language/Flutter
-
[Flutter] Visual Studio Code에 개발환경 구축하기2020.06.25
-
[Flutter] Windows에 Flutter 설치2020.06.20
[Flutter] Visual Studio Code에 개발환경 구축하기
Android Studio 가 익숙하지 않으신 분들은 VSCode 툴을 이용해서 Flutter를 개발하실 수 있습니다.
Visual Studio Code가 Android Studio 보다는 구동이 가볍기 때문에, 환경에 맞는 툴을 이용하셔서 개발하는 것을 추천 드립니다.
1. Extension 설치
Visual Studio Code를 실행한 다음, 좌측에 보시면 아래 모양의 아이콘을 클릭하시면 각종 Extension 들을 설치 하실 수 있습니다.
Flutter Extension 설치
Flutter를 검색하셔서 설치 하시면 되며, Dart 언어도 같이 설치가 되기 때문에 Flutter 만 검색 하셔서 설치 하시면 됩니다.
Rainbow Brackets 설치
Dart 언어의 특성상 브라켓이 많아 가독성을 조금이라도 늘리고 싶으면 Rainbow Brackets 라는 플러그인을 추천 합니다.
2. 프로젝트 만들기
Windows 환경의 경우 Ctrl + Shift + P 혹은 / View -> Command Palette 를 입력하시면, 아래와 같은 입력 창이 나타납니다.
해당 입력 창에서 flutter를 입력하시면, 상단에 새로운 프로젝트를 만들 수 있는 명령어가 보여집니다.
해당 명령어를 입력하시면 새로운 프로젝트를 생성 하실 수 있습니다.
프로젝트 명을 입력하시면, 아래와 같이 기본 템플릿이 생성되어 집니다.
디바이스 선택
CMD+SHIFT+P 입력 후 Flutter: Launch Emulator 를 입력하면, 안드로이드 디바이스를 선택할 수 있습니다.
Android Studio 에서 만드신 Emulator가 보이실 겁니다.
아니면, 요즘 PC에 많이들 설치하시는 설치형 에뮬레이터를 키고 진행하셔도 됩니다.
빌드
Run 메뉴에 가서 Start Debugging을 선택하시거나, F5 키를 누르시면, 선택하신 에뮬레이터로 빌드가 되는 모습을 보실 수 있습니다.
'Program Language > Flutter' 카테고리의 다른 글
[Flutter] Windows에 Flutter 설치 (0) | 2020.06.20 |
---|
[Flutter] Windows에 Flutter 설치
iOS와 Android 두 플랫폼을 멀티로 지원하는 플랫폼은 제가 알기로는 두개였었습니다.
첫번째가 Xamarin 이였고, 그 다음이 React 였는데요.
우연한 기회에 Flutter를 알게 되었습니다. Google에서 만든 Mobile App SDK 입니다.
Google에서 개발 하였다고 하니, 지원이 좋을것 같아서 공부해 보는 계기가 되었습니다.
1. 설치
위 설치 경로로 접속을 하시면, 아래와 같은 화면을 보실 수 있습니다.
설치가 필요한 OS에 맞게 링크를 클릭합니다.
2. 다운로드
위 경로로 진입하시면 두가지 방법으로 SDK를 다운 받으실 수 있습니다.
한가지 방식은 zip 파일을 다운 받으셔서, 압축을 풀고 진행하시는 방식이 있고,
git을 이용해서, 아래 주소의 git 파일을 다운 받아서 사용하는 방식입니다.
C:\src>git clone https://github.com/flutter/flutter.git -b stable
위 두가지 방식 중 본인에게 필요한 방식으로 다운로드를 진행하시면 됩니다.
3. 환경 변수 등록
설치형 SDK가 아니기 때문에, flutter 명령어를 자유롭게 사용하려고 하신다면, 환경변수로 등록하셔야 합니다.
flutter 를 설치한 경로의 bin 폴더까지 Path에 등록하시면 됩니다.
4. Flutter 설정
flutter를 사용하기 적절한 환경인지, 체크해주는 명령어가 있습니다.
바로 아래의 명령어 인데요.
해당 명령어를 이용하면, 총 4가지 상태를 체크하게 됩니다.
C:\>flutter doctor
위 까지 진행하셨다면, 첫번째만 체크가 되어 있을텐데요.
저는 Android Studio 가 설치 되어 있어서, 해당 부분도 체크가 되어 있었습니다.
두번째 체크를 진행하시려면, 아래의 명령어를 입력해서 licenses를 수락하셔야 합니다.
대부분 y 를 입력하시면 통과 됩니다.
c:\> flutter doctor --android-licenses
정상적으로 두번째가 체크된걸 확인 하실 수 있습니다.
이제 마지막 단계인데요. 이부분은 device 를 연결하셔도 되고,
Android Studio에 있는 디바이스 를 실행 시키고 진행하셔도 통과가 됩니다.
'Program Language > Flutter' 카테고리의 다른 글
[Flutter] Visual Studio Code에 개발환경 구축하기 (0) | 2020.06.25 |
---|