Edited at

Flutter_開発準備


Flutter_開発準備

Flutterを使用した開発環境の準備手順を説明します。


Flutter


ダウンロード

Flutter本家のページ。

https://flutter.dev/

上段の「Ger started」をクリックし、ダウンロード画面に移動します。

flutter_1.png

開発用のパソコンに合わせて選択します。

flutter_2_1.png

「flutter_windows_v1.2.1-stable.zip」をクリックして、ZIPファイルをダウンロードします。

flutter_2_2.png


Android Studio


ダウンロード

アンドロイドの開発者コードのサイト。

上段のリンクから「Android Studio」をクリック。

https://developer.android.com/?hl=ja

androidstudio1_1.png

アンドロイドスタジオのページ。

ダウンロードのボタンをクリックします。

https://developer.android.com/studio?hl=ja

androidstudio1_2.png

ダウンロード時に同意が求められるので、内容を読んだうえで同意します。

androidstudio1_3.png


インストール

基本的にはそのまま「Next」をクリックして進んでしまって問題ありません。

androidstudio_install_1.png

androidstudio_install_2.png

androidstudio_install_3.png

androidstudio_install_4.png

androidstudio_install_5.png

androidstudio_install_6.png

androidstudio_install_7.png

androidstudio_install_8.png

androidstudio_install_9.png

androidstudio_install_10.png

androidstudio_install_11.png

好みに合わせて選択してください。

androidstudio_install_12.png

androidstudio_install_13.png

androidstudio_install_14.png

androidstudio_install_15.png


Flutter


設定

flutter_setting_1.jpg

flutter_setting_2.jpg

「flutter doctor」コマンドを実行すると環境構築に何が足りていないか教えてくれます。

flutter_setting_3.jpg

「flutter doctor --android-licenses」を実行して、androidライセンスに同意してね

と記載されているので、上記のコマンドを実行しましょう。

flutter_setting_5.jpg

何度か同意されるか聞かれるので、

同意するよう「y」を入力して「Enter」キーを押してください。

flutter_setting_6.jpg

警告の1番上が解消されてたことが確認できました。

続いて警告になっている

- Flutter

- Dart

のプラグインがインストールされていない警告を解消していきます。

flutter_setting_12.jpg

インストールしたAndroid Studio を起動して、プラグインを選択します・

flutter_setting_13.jpg

「flutter」で検索してインストールします。

flutter_setting_15.jpg

再度「flutter doctor」で確認します。

flutter_setting_16.jpg

警告だった箇所が1つ解消されたことが確認できます。

なお、「No devices avalible」について、この時点で警告になっていて問題ありません。


プロジェクトを作成

「Start new Flutter Project」 を選択

flutter_use_1.jpg

flutter_use_2.jpg

「FluterのSDKのパスを指定してね」とエラーになっているので、

「Flutter」をダウンロードしたフォルダを指定します。

flutter_use_3.jpg

flutter_use_4.jpg

flutter_use_5.jpg

flutter_use_6.jpg


仮想デバイスを作成

この状態で実行使用とすると下記のエラーになるため、

仮想デバイスを作成します。

flutter_use_6_1.jpg

flutter_use_7.jpg


作成手順

flutter_use_8.jpg

flutter_use_9.jpg

flutter_use_10.jpg

flutter_use_11.jpg

flutter_use_12.jpg

flutter_use_13.jpg

flutter_use_14.jpg

flutter_use_15.jpg

以上で仮想デバイスの作成は完了です。

実行すると下記のようにスマホが表示されます。

flutter_use_19.jpg


仮想デバイスが実行できない場合

開発する環境によっては下記のエラーとなります。

その場合は「Windowsハイパーバイザープラットフォーム」を有効にしてください。

flutter_use_16.jpg

flutter_use_17.jpg

flutter_use_18.jpg