省エネエンジニア

Flutter、vue.js修行中。

【Flutter】VSCodeで開発環境を作る

qkuronekop.hatenablog.jp

以前、AndroidStudioでの開発環境の作り方を書いたのですが、VSCodeでも作ってみようと思います。

まずはここからFlutterSDKをダウンロードします。
DLしたらzipを展開して適当な場所に置きます。
flutter.dev

flutter/binにパスを通します。

パスが通ったか確認。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale ja-JP)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.3)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
    ! Brew can be used to install CocoaPods.
      Download brew at https://brew.sh/.
[✗] iOS tools - develop for iOS devices
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ! Brew can be used to install tools for iOS device development.
      Download brew at https://brew.sh/.
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.36.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

! Doctor found issues in 5 categories.

Android

ライセンスに同意する。

$ flutter doctor --android-licenses

iOS

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

XCodeがインストールされていない場合には、XCodeをインストルして、

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

コマンドを打てばOKです。

cocoa podがインストールされていない場合には、

brew install cocoapods
pod setup
brew install ios-deploy

VSCodeからFlutterプラグインDartをインストールします。

f:id:qkuroneko:20190829132630p:plain:w320 f:id:qkuroneko:20190829132648p:plain:w320

ここまでチェックがつけばOKだと思います。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
[✓] iOS tools - develop for iOS devices
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.36.1)
[✓] Connected device (1 available)

ここまでできたらコマンドパレットからFlutter: New Projectを実行してください。

FlutterSDKの場所を聞かれたら「LocateSDK」ボタンを押して、flutterフォルダを選択してVSCodeを再起動してください。

次にプロジェクト名とどこにプロジェクトを作るか聞かれるので任意の名前と場所を入れてください。

はい、完成。

[f:id:qkuroneko:20190829133118p:plain:320]

Androidエミュレータにインストールしてみました。