LoginSignup
0
2

More than 3 years have passed since last update.

Flutter_開発準備

Last updated at Posted at 2019-04-14

Flutter_開発準備

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

Flutter

ダウンロード

Flutter本家のページ。
https://flutter.dev/
上段の「Get 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

「Flutterの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

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2