vscode를 이용한 flutter 작성

flutter sdk 설치 및 프로젝트 생성/실행

노트북을 갈아엎고, 미국에 오고, 한동안 코딩에 손을 못 대다가 다시 시작하게 되면서 이번엔 (flutter에 조금 익숙해졌다고, 그리고 chatgpt를 믿고) vscode를 ide로 사용해서 flutter 코드를 작성해보기로 했다. Flutter 공식 페이지에서 sdk 3.10.1을 다운받아서 시작했다.

그리고 한주 지난 지금 이미 sdk 3.10.2 버전이 릴리즈 되어있다.

해당 압축파일을 특정 폴더에 풀어놓고 (나의 경우엔 c:\src\flutter_3.10) 프로젝트 폴더를 생성할 위치에서 아래 명령어를 입력하면 프로젝트 폴더가 생성된다.

$ c:/src/flutter_3.10/bin/flutter create mobile

이후 Run → Start Debugging (F5) or Run Without Debugging (Ctrl+F5)을 입력하면 아래 이미지와 같이 실행 방식을 선택할 수 있다.

flutter web

Chrome(혹은 edge) 선택 시 flutter web이 실행된다. 당연히 chrome ↔ edge 상호 호환 되나, 처음 지정한 실행방식의 window를 닫을 경우 debug가 자동 종료된다.

flutter desktop

desktop 실행을 하기 위해선 visual studio 설치가 선행되어야 한 것 같다. 쓸 일은 없겠지만 한번 시도해보자.

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.10.1, on Microsoft Windows [Version 10.0.22621.1702], locale en-US)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[!] Android Studio (not installed)
[√] VS Code (version 1.78.2)
[√] Connected device (3 available)
[√] Network resources

Visual studio 설치할 때 Desktop 개발을 위한 해당 라이브러리를 추가해줘야 한다. 기본 + 해당 라이브러리 하나 추가만으로 17.6GB가 넘는다..

이후 동일한 방식으로 (Desktop 실행을 선택하면) desktop application의 flutter 실행이 된다.

flutter android

여기까지 와서 내가 삽질을 했다는 것을 깨달았는데, 안드로이드 에뮬레이터 실행을 위해선 AVD manager가 필요하고, (윈도우 기준) 가장 쉽게 설정하는 방법은 Android studio를 설치하는 것이다. 이럴거면 그냥 안드 스튜디오를 썼지... Android studio를 설치하자 안드 스튜디오를 설치하면 기본적으로 구글 레퍼폰인 pixel의 한 버전이 설치되는데, 지금 버전인 Flamingo에서는 아래 스샷처럼 안드 API 33 버전으로 뜬다.

Device를 선택하고 (cold boot으로 해야하는듯 하다.) F5를 눌러 실행하면 아래 스샷처럼 실행이 된다.

apk build

apk 파일 build는 간단한데, vscode에서 ctrl+shift+B를 눌러서 나오는 팝업에서 apk 빌드를 선택하면 된다.

 *  Executing task: c:\src\flutter_3.10\bin\flutter.bat build apk

Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 1336 bytes (99.9% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Running Gradle task 'assembleRelease'... 108.8s
√ Built build\app\outputs\flutter-apk\app-release.apk (17.1MB).

- Terminal will be reused by tasks, press any key to close it.