Flutter 環境構築

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がダウンロードされます。

実行すると、このような画面が立ち上がります。

インストールするフォルダを指定します。デフォルトでOKです。

ショートカットの作成は不要と思ったので、「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」と入力し、

下記、画像の上から4番目にある 「Extensions: Install Extensions.」 を選択します。

※公式ドキュメント通りです。 https://flutter.dev/docs/get-started/editor?tab=vscode

画面左のバーにある「□が4つ」あるマーク(プラグインメニュー)を選択し、

「flutter」で検索すると、最上位に目的の「Flutter」プラグインがヒットします。

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

「Dart」のプラグインも必須ですが、先ほどの「Flutter」プラグインのインストール時に

同時に「Dart」のプラグインもインストールまで完了しています。(すごく楽)

Flutter 実行

Flutterのインストールも終わり、Editorの設定も終わったのでサンプルコードを実行してみます。実行は「F5」キーから可能です。わくわくですね。

・・・怒られました。メッセージを読むと、

使える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を触っていきたいと思います。

関連書籍

コメントを残す

メールアドレスが公開されることはありません。