この記事の目次
Flutter 環境構築
Flutterが気になるので、環境構築をしてみました。
下記の公式ドキュメントを参考に進めました。
Flutter公式URL: https://flutter.dev/docs/get-started/install
Flutter インストール
まずはFlutternoインストールからです。
環境変数 PATH設定
「パスを設定するように」と書かれているので、環境変数にパスと追加します。
環境チェック
パスの設定が完了したら、コマンドプロンプトにて「flutter docotr」と入力
※コマンドプロンプトはスタートメニュー横の検索ボックスで「cmd」と入力し、
Enterキーを叩くと起動します。
私の環境ではAndroid SDKがインストールされていないので「×」マークが出ました。
「！」マークは参考情報のようですが、「×」に関しては対応が必須です。
Android SDK インストール
Androidのセットアップに関しても公式ドキュメントに掲載されていました。
Android Studioをインストールする方向で進めます。
Android Studio インストール
developers公式URL：https://developer.android.com/studio
規約に同意すると、Android-Studio-IDE.exeがダウンロードされます。
実行すると、このような画面が立ち上がります。
インストールするフォルダを指定します。デフォルトでＯＫです。
ショートカットの作成は不要と思ったので、「Do not create shortcuts」にチェックを入れました。
「Install」ボタンを押下すると、Android Studioのインストールが始まります。
これで、Android Studioのインストールは完了です。
Android Studio 起動
Android Studioを起動すると、「設定はどうするの？」と聞かれます。
初めてなので、「Do not import settings」を選択します。
Googleからデータシェアの同意を聞かれます。
私は「Send usage statistics to Google」を選択しました。
引き続き、Android Studioの設定が続きます。
Install TypeはFlutterの環境構築をする際には「Standard」で大丈夫です。
ユーザーインターフェースのテーマ（色合い）を聞かれます。
好みですが、「Darcula」の方が格好良く見えたので「Darcula」を選択しました。
Finishを押すとコンポーネントのダウンロードが開始されます。
コンポーネントのダウンロードが完了後、Finishを押下すると下記の画面が立ち上がります。
この後の各種設定作業をする際には、画面の右下にある「Configure」を使用します。
Flutter 環境確認
Android Studioをインストールしたことで、Android SDKのインストールも完了しています。
なので、再度コマンドプロンプトにて「flutter doctor」を入力します。
そうすると、先ほど出ていた「×」マークが無くなっていることが確認できました。
Editor 設定
使用するエディタの環境を設定していきます。
私はVisual Studio Codeを使うことが多いので「Visual Studio Code」の設定方法について紹介します。
上部バーにある [View] > [Command Palette…]を選択
コマンド入力にて「install」と入力し、
下記、画像の上から４番目にある 「Extensions: Install Extensions.」 を選択します。
※公式ドキュメント通りです。 https://flutter.dev/docs/get-started/editor?tab=vscode
画面左のバーにある「□が４つ」あるマーク（プラグインメニュー）を選択し、
「flutter」で検索すると、最上位に目的の「Flutter」プラグインがヒットします。
「Install」ボタンを押下します。
「Dart」のプラグインも必須ですが、先ほどの「Flutter」プラグインのインストール時に
同時に「Dart」のプラグインもインストールまで完了しています。（すごく楽）
Flutter 実行
Flutterのインストールも終わり、Editorの設定も終わったのでサンプルコードを実行してみます。実行は「Ｆ５」キーから可能です。わくわくですね。
・・・怒られました。メッセージを読むと、
使えるAVD (Android エミュレータ ) system imageがないよ。SDK Managerからインストールしてね。
とのこと。このメッセージに少し騙されました。
結論を言うと、
Android Studio > SDK Manager の設定ではなく、
Android Studio > AVD Manager の設定が必要でした。
たしかに、AVDの設定が足りていないならAVD Managerだなぁ…と後々思いました。
SDK Manager（確認だけ）
Android Emulator にはチェックが入っていることを確認します。
AVD Manager 設定（本命）
ハードウェアは適当なものを選択します。
System Imageはお勧めされているものを素直にダウンロードしました。
Finishボタンを押下後、Nextで次の設定へ
これでAVDの設定は完了です。
再びFlutter 起動
起動確認まで完了しました。
まとめ
上記の手順で、Flutterの環境構築まで完了しました。
次は実際にサンプルを写経しながらFlutterを触っていきたいと思います。