Flutter公式によると、Flutterを起動する環境としてAndroid StudioとVisual Studio Code(VSCode)を使用することを前提としています。
筆者はAndroid Studioで個人開発をしていましたが、自身の勉強も兼ねてVSCodeでのFlutter起動手順を整理します。
- Flutterに興味・関心のある人
- Androidアプリをこれから作ってみたい人
- VSCodeをインストール済みの人
若干、Flutterを携わっていることが前提になります。
ご了承ください。
実行環境
まずは実行環境です。最終的に同じような環境になればOKです。
PS C:> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18362.836], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.40.1)
[√] Connected device (1 available)
元々、筆者のPCにはFlutterを導入していました。
しかし、JAVA_HOMEをJava8→Java11に変更してました。
久々にアップデートしてflutter doctor
をすると、
エラー検出した時の原因がJAVA_HOMEでした。
※Flutter⇔WebサービスでWebサービスをJavaで作ってました。そのときJava11で作ってみたのですが、Android toolchainが対応していないようです。
Java8にパスを通すことで解決します。
今回は、Amazon Correttoのディストリビューションを利用しました。
リンク張っておきます。
https://aws.amazon.com/jp/corretto/
拡張機能設定
VSCodeでFlutterを使えるようにしていきましょう!
メニューの表示→コマンドパレットでExtensions: Install Extensions
を打ち込み、Flutterの拡張機能を取得します。
Flutterを選択してインストールします。
Dartも併せてインストールして下さい。
FlutterとDartの拡張機能がインストールされていることが確認できます。
ちなみに、筆者は英語苦手ですので、さらっと日本語拡張パッケージを入れてます。英語苦手でFlutterできるのかという話ですが、それはそれ、これはこれですよ。
新規プロジェクトの作成
それでは、VSCodeで新規プロジェクトを作成していきましょう。
ここがAndroidStudioとは違うところでVSCodeでは、コマンドパレットからプロジェクトを作成します。
コマンドパレットから作成するということはPowerShellやターミナルなどからプロジェクトを作成するイメージですね。
表示→コマンドパレット Flutter: New Project
プロジェクト名を決定します。今回はmonte_calro
にしました。
機械学習の一つにモンテカルロ法があるのでそれをFlutterで実現してみようかとw
次回以降の布石です!
起動確認
それでは今回はエミュレータにFlutterアプリを起動していきます。
今回使用するエミュレータはAndroid 9.0のPixelです。
エミュレータを起動した状態でデバッグ実行していきます。
VSCodeのメニュー→デバッグ→デバッグの開始を選択するとデバッグが開始されます。
初回は少し時間がかかります。2,3分ぐらいかな。
Flutterの初期画面が表示されれば完了です。
今後の予定
今回はVSCodeでのFlutter起動手順でした。
Flutterはまだまだ新しい言語なので日本語ドキュメントで参考になるものを見つけるのも一苦労です。
ここではFlutterのAPIを使った検証を中心に実施していこうと思います。
まずは、canvasを利用した図形描画をする予定です。
それでは、See you Again!