Flutter에 대한 관심이 많아져 한 번 배워보고자 설치를 해보았습니다.
flutter-ko.dev/docs/get-started/install/windows
윈도우에서 설치
flutter-ko.dev
우선 위의 페이지에 들어가서 Flutter SDK 를 다운을 받고 압축을 해제해줍니다.
Flutter 폴더/bin 에 들어간 다음 flutter doctor 을 실행하여 설정을 완료하는데 필요한 플랫폼 의존성이 있는지 체크를 합니다.
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine 2f0af3715217a0c2ada72c717d4ed9178d68f6ed...
Unzipping Dart SDK...
Building flutter tool...
Running pub upgrade...
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
Downloading Material fonts... 0.8s
Downloading Gradle Wrapper... 0.1s
Downloading package sky_engine... 0.1s
Downloading flutter_patched_sdk tools... 0.8s
Downloading flutter_patched_sdk_product tools... 1.0s
Downloading windows-x64 tools... 1.3s
Downloading windows-x64/font-subset tools... 0.4s
Downloading android-arm-profile/windows-x64 tools... 0.3s
Downloading android-arm-release/windows-x64 tools... 0.3s
Downloading android-arm64-profile/windows-x64 tools... 0.3s
Downloading android-arm64-release/windows-x64 tools... 0.3s
Downloading android-x64-profile/windows-x64 tools... 0.3s
Downloading android-x64-release/windows-x64 tools... 0.3s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, on Microsoft Windows [Version 10.0.19042.804], locale ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
X Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! Device emulator-5554 is offline.
! Doctor found issues in 4 categories.Android Studio, VS Code 에서 Flutter, Dart 플러그인이 설치되어 있지 않다고 안내해주네요.
여기서는 Android Studio를 사용해서 개발하는것이 아니라 VS Code 를 통해서 개발할 것이라서 VS Code가 설치되어 있지 않다면 VS Code 부터 설치를 하셔야 합니다. (하지만 Android App 을 개발하려면 Android SDK 가 필요합니다.)
VS Code 설치가 끝나셨다면 아래와 같이 Flutter Plugin 을 설치해보도록 합니다.
Dart 언어의 특성상 브라켓이 많아 보기가 불편하실 수 있습니다. 그래서 가독성을 조금이라도 늘리시고 싶으신분은 `Rainbow Brackets` 플러그인도 함께 설치해주세요. (이 부분은 건너뛰어도 무방합니다.)
자, 여기까지 하셨으면 VSCode에 Flutter 개발환경이 완료되었습니다.
이제 프로젝트를 만들어서 그 유명한 `Hello, World!` 를 한 번 만들어보겠습니다.
`Ctrl + Shift + P` 를 눌러서 flutter을 입력해서 `Flutter: New Application Project`를 선택해줍니다.
그러면 VSCode가 아래와 같이 안내 메세지를 보여주는데요
저희는 아까 Flutter 공식 홈페이지에서 SDK를 다운받았기 때문에 `Locate SDK`를 선택 후 SDK가 있는 경로를 지정해둡니다. (Flutter폴더의 bin폴더를 지정해주셔야 합니다.)
이제 다시 터미널창에서 `flutter doctor`을 입력해서 Flutter개발 환경이 만들어졌는지 확인해보겠습니다.
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses띠용~ 이럴때는 고민 없이 `flutter doctor --android-licenses`를 입력 후 `y`를 계속 입력합니다.
이제 에뮬레이터를 하나 띄워줍니다. 저는 LDPlayer을 사용했습니다. New Application Project 을 선택하시면 아래와 같이 자동으로 소스코드를 만들어줍니다.
에뮬레이터까지 실행이 되었다면 F5 키를 눌러서 실행합니다. 최초 실행시 준비과정 등등 때문에 시간이 조금 소요될 수 있습니다.
짜잔~ 완료되었습니다. 다음 포스팅에서는 Flutter을 활용해서 이것저것을 만들어보는 글을 쓰도록 하겠습니다.
