Flutter環境構築 -Windows編-

Flutter（読み方：フラッター）。

Googleが提供するモバイル（iOS、 Android）、Web のアプリケーションを作成できるツールキットです。

言語はDart言語を使用しており、現状では、iOS、Androidのモバイル開発に利用されていることが多いようです。

Flutter SDKは、GitHubで管理されているソースコードそのものです。

チャネルが4つあり、安定版「stable」の使用が推奨されています。

●master（マスター版）

現時点の最新ソースコードの開発ブランチ。最新の機能を試すことが可能だが不安定

●dev（開発版）

マスター版から分岐。最新のテストが通ったブランチ。マスター版よりは安定している

●beta（ベータ版）

月の始めに開発版から安定化された新しいベータ版に分岐される

●stable （安定版）

約四半期に1度、ベータ版から安定化された新しい安定版が分岐される

以下の公式サイトより、Flutter SDKをダウンロードします。

（今回はWindowsに構築するので、Windowsを選択します。）

特定のバージョン・チャネル指定する場合はこちら

ダウンロードファイルを任意のフォルダに解凍します。

Flutter SDK配下にあるbinのパスを環境変数に設定します。

<環境変数の設定>

コントロールパネル > システムとセキュリティ > システム > システムの詳細設定 > 環境変数ボタン押下

ユーザ環境変数のPathに追加します。

パスを通したフォルダで、以下のコマンドを実行します。
このコマンドを実行すると、開発環境構築で足りないものを教えてくれます。

$ cd C:\tool\flutter\sdk_2.2.0\bin
$ flutter doctor

×マークや！マークがついている項目は、準備が足りない項目です。

下記より2つの項目で準備が足りないと言われてます。
Android Studioをインストールすると、Android SDKも一緒にインストールされるため、
次にAndroid Studuioのインストールを行います。

[X]Android toolchain - develop for Android devices
X Unable to locate Android SDK…
[!]Android Studio (not installed)

公式サイトよりAndroid Studioの利用規約を確認し、実行ファイルをダウンロードします。

ダウンロードした実行ファイルをクリックしセットアップを開始します。

セットアップ開始画面が表示されます。

「Next」をクリックし、次に進みます。

インストールするコンポーネントを選択します。

「Next」をクリックし、次に進みます。

インストール先のディレクトリを指定します。

「Next」をクリックし、次に進みます。

スタートメニューに表示される名前を設定します。

「Install」をクリックすると、Android Studioのインストールが開始します。

「Next」をクリックし、次に進みます。

Start Android Studioにチェックを入れて、「Finish」をクリックします。

旧バージョンのAndroid Studioを使用していた場合は、設定をインポートすることができます。

今回は「Do not import settings」をチェックして「OK」をクリックします。

セットアップウィザードが開始されます。

「Next」をクリックし、次に進みます。

インストールするタイプを選択します。

「Next」をクリックし、次に進みます。

Android Studioのテーマを選択します。

「Next」をクリックし、次に進みます。

セットアップする確認内容が表示されます。

「Finish」をクリックすると、ダウンロードが開始されます。

ダウンロード完了が表示されます。

「Finish」をクリックします。

「Welcome to Android Studio」のダイアログが表示されます。

次にFlutterプラグインをインストールします。

右下にある「Configure」をクリックします。

一覧表示から「Plugins」をクリックします。

Pluginsダイアログが表示されます。

左上のプラグイン検索フォームでFlutterを検索し、「Install」をクリックします。

Flutterプラグインのインストールが開始されます。

プラグインのインストールが完了すると、「Restart IDE」ボタンが表示されます。

「Restart IDE」をクリックし、Android Studioを再起動します。

「Welcome to Android Studio」のダイアログが表示されます。

「Create New Flutter Project」メニューが表示されていることを確認します。

再度「flutter doctor」コマンドを実行します。

Android Studioの「！」マークが「✔」に変わっていることを確認します。

[！]Android Studio (not installed)

[✔]Android Studio

また、Android SDKについてAndroid SDKのバージョンが表示されていることを確認します。

[X]Android toolchain - develop for Android devices
X Unable to locate Android SDK...

[！]Android toolchain - develop for Android devices.(Android SDK version 30.0.3)
X Android licenses not accepted.....

新たに「Android licenses not accepted….」と足りない項目が追加されましたので、
次に、Androidのライセンス承認を行います。

メッセージ通りに以下のコマンドを実行しAndroidライセンスの受け入れを行います。
コマンドを実行すると承認してよいか？尋ねられるので「y」を入力して進みます。

$ flutter doctor--android-licenses

再度「flutter doctor」コマンドを実行します。

必要な項目すべてに「✔」が表示されることを確認します。

「Welcome to Android Studio」のダイアログが表示されます。

「Create New Flutter Project」をクリックします。

「①Flutter SDKをダウンロード」で任意のフォルダに配置したFlutter SDKのパスを指定し、

「Next」ボタンを押下します。

必要な項目を入力し、「Finish」をクリックします。

新規プロジェクトが作成されました。

早速、プロジェクトを実行してみましょう。

今回はエミュレーターを使用して実行します。

右上のスマートフォンのアイコンをクリックします。

デバイスマネージャーのダイアログが表示されます。

デフォルトで1つデバイスが作成されているので、今回はデフォルトのデバイスを実行します。

Actionsメニューの▶ボタンをクリックします。

エミュレーターが起動されました。

アプリを実行します。

右上の▶をクリックします。

アプリが実行されました。