• TOP
• プログラミング

【Mac】わからない人のためのVSCodeを使用したFlutter開発環境構築

2020-06-10T09:00:00+09:00 2020-06-10T09:33:23Z アプリ プログラミング

この記事ではFlutterの環境構築に詰まってしまった人にもおすすめなVSCodeを使用した環境構築方法について解説していきたいと思います．

ちなみに当方の環境としてはmacOS 10.15.3となりますが，ずいぶん前からMacを使っているので使用しているシェルはbashとなります．

一応zshの場合も記載しておきますので是非参考にしてください．

Flutter SDKのインストール

まずはこちらのサイトにアクセスしてください．
そしてSDKのzipファイルをダウンロードしてください．

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

そして次のコマンドを打ち込んでください．
ちなみに私の場合はFlutterのバージョンが1.17.3-stableだったのでみなさんは適宜バージョンを変更してくださいね．

cd ~/development
unzip ~/Downloads/flutter_macos_1.17.3-stable.zip

また，stable版以外に最新バージョンをダウンロードしたいという方はgitからcloneしてインストールすることもできます．

git clone https://github.com/flutter/flutter.git

一応stable版にアクセスするには以下のコマンドで切り替えることでもできます．

git clone https://github.com/flutter/flutter.git -b stable --depth 1

私は最新版が好きなのでgitのmasterブランチからインストールしました．

インストールした後はインストール先のディレクトリにパスを通しましょう．
シェルがbashの方は~/.bash_profileまたは.bashrcに以下のコマンドを追記してください．

export PATH="$PATH:$HOME/development/flutter/bin"

私は$HOME/development内にgit cloneしたので以下のパスを追記しました．
また，zshの方は.zshrcに記載してください．

このパスを追記するとターミナルを再起動したときにflutter --versionというコマンドが打てると思うのでそこで以下のような表示が見れればSDKのインストールは完了です．

Flutter 1.19.0-4.0.pre.99 • channel master • https://github.com/flutter/flutter.git
Framework • revision 7467492444 (79 minutes ago) • 2020-06-08 02:03:01 -0400
Engine • revision dfdd88deb7
Tools • Dart 2.9.0 (build 2.9.0-13.0.dev 87c5e3612b)

Flutter依存関係のインストール

というわけで次は依存関係のインストールです．

まずは何が足りないのかを知るために以下のコマンドを打ち込んでください．

flutter doctor

私の場合は以下のようなエラーが発生しました．

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.19.0-4.0.pre.99, on Mac OS X 10.15.3 19D76, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ 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/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.


[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[!] Android Studio (not installed)
[!] VS Code (version 1.45.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

とりあえずAndroid SDKがないと言われたのでAndroid SDKをインストールします．
というかXcodeもそうだけどこんなに色々なファイルをダウンロードさせないでくれぇ．．．

こちらのサイトからAndroid Studioをダウンロードしてください．

https://developer.android.com/studio

ダウンロードが終われば次はインストールです．インストール後にAndroid Studioを開きセットアップを完了しましょう．

また，VSCodeを今回は使用していくので同じくbrew doctorで表示されている以下のサイトからFlutterのExtensionをインストールしましょう．

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

というわけでこれで環境構築は完了かなと思ったんですが再度flutter doctorを試すと以下のようなエラーが出ました．

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 4.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

まぁAndroid Studioに関しては使うことはないかと思うので無視でいいとしてAndroidのライセンスでエラーのようです．とりあえず表示されているコマンドを入力しましょう．

するとライセンスの確認のための表示が出てきますのでyで順次Acceptしていきましょう．これでこのエラーは消え去るかと思います．

エミュレータの設定

そういえばまだAndroid Studioでやるべきことが残っていました．
エミュレータの設定をしておかないとVSCodeではエミュレータを使用できないので設定しておきます．

とりあえず適当にFlutterのプロジェクトでも作成しておきましょう．ちなみにFlutterのプロジェクトを作るにはFlutterのPluginが必要なのでAndroid StudioのPreferences > PluginsからFlutterをインストールしましょう．

ちなみにPreferencesはcommand+Fで開けます．

また，プロジェクトの作成方法ですがまずはAndroid Studioを開いてStart a new Flutter Projectからプロジェクトを作成します．

選択すると以下のような画面に遷移すると思います．

というわけでプロジェクトを作成できたと思いきやFlutter SDKの場所を教えてあげる必要があります．

以下の画像のように自身がインストールしたflutterの場所を選択してください．

というわけで後は以下の設定を完了すればプロジェクトの作成は完了です．

次にエミュレータを追加していくわけですが以下の画像で赤い線に囲まれているアイコンをクリックしてください．

そうすると以下の画面に遷移しますのでCreate Virtual Devicesを選択してください．

次に作成するエミュレータのターゲットを選択してください．私は楽天モバイルでGalaxy A7を格安で入手したので同じ6インチのPixel 3a XLを選択しました．

ちなみに楽天モバイルでGalaxy A7を購入した話についてはこの記事で詳しく解説しています．

【Rakuten UN-LIMIT】楽天モバイル長期割から移行して格安でAndroidスマホを購入した話

というわけでNougat x86というやつをダウンロードすればいいようです．なんか二つあるんで迷いましたがOSの違いなのかなと思って下の方を選びました．

ダウンロードが終わればFinishをクリックしてください．そうすればNougat x86の画面でNextが選べるようになっていますのでNextをクリックして終了してください．

その後Android Studioを再起動してください．また，一度もAndroid Studioを使ったことがない方はStart a new Android Studio projectから適当にプロジェクトを作って開いてください．

プロジェクトを開けば自動的にエミュレータを使用するために必要なファイルがダウンロードされますのでダウンロードした後，再度Flutterのプロジェクトを開けば以下の画像のようにSimulatorが選べるようになっているかと思います．

その後エミュレータを起動してアプリを実行することで以下のようにアプリ画面が見れるかと思いますのでボタンを押して動作を確認しておきましょう．

ちなみにiOS版のシミュレータも使用できるのでどちらも起動した場合以下のような感じになります．

VSCodeの設定

というわけでエミュレータの動作も確認できたのでいよいよVSCodeでの設定をしていきたいと思います．
Cdでプロジェクトを作成したいフォルダに移動して以下のコマンドを打ち込んでください．

flutter create helloflutter

これで色々とファイルが作成されたと思いますので次にシミュレータの設定を行いましょう．右下の部分をクリックしてシミュレータを選択してください．

その後F5を押すことでデバッグ兼アプリのビルドを行うことができます．

また，ターミナルにてプロジェクト直下でflutter runコマンドを入力しても良いのですがアプリを制作中の場合はデバッグが簡単に行えるF5から起動することをおすすめします．

これでFlutterの設定を完了しました．

まとめ

この記事ではFlutterをVSCodeで使用するための環境構築について解説しました．

一応Xcodeは入っていましたがAndroid Studioを入れていない状況から解説しましたのでどのような方にも参考になったのではないかなと思います．

それではみなさんも快適なFlutter生活をお楽しみください．