リファレンス
Reference

Flutterの環境構築(Windows)

URLをコピーする Twitterでシェアする Facebookでシェアする

Flutterの環境構築しよう!

Flutter とは

Flutter は、Google 社が開発したAndroid / iOS 向けのクロスプラットフォームフレームワークです。

同じく Google 社が開発した「Dart(ダート)」を開発言語としており、Widget(ウィジェット)と呼ばれる独自の UI コンポーネントを用いて自由度の高いカスタム UI を構築することができます。

Flutter の特徴をもっと知りたい方は、以下のリンクをぜひ訪れてください。

Flutterとは? エヌ次元が企業としてFlutter開発を採用する理由

Flutter をインストール

まずは、以下のリンクに進み、Flutter SDK の圧縮ファイルをインストールしてください。

Flutter の公式サイト

公式サイトでは、最新バージョンの安定版パッケージをインストールすることが推奨されています。もし異なるバージョンや Dev 版や Beta 版をインストールしたい場合は、 こちらのリンク からインストールできます。

ダウンロードした圧縮ファイルを解凍し、中にある flutter フォルダごとを C:\src\ のしたにコピーします。

フォルダ src の名前は、各ユーザーの好きなもので命名して大丈夫です。ただし、こちらのマニュアルでは公式ドキュメントに倣い、srcと命名します。 また、C:\Program Files\ のようなアクセス制限が設けられているパスに置いてはいけません。

フォルダ構造は以下のようになります。

環境変数の設定

Windows のコマンドプロンプトで Flutter コマンドを使えるようにするのに、環境変数を設定する必要があります。

まず、 windows キーを押して、検索欄に env を検索します。「システム環境変数を編集」(Edit the system environment variables) を選択します。

そして、「システムのプロパティ」(System Properties) ウィンドーの下にある「環境変数」(Environment variables) をクリックし、環境変数の設定画面を開きます。

環境変数設定画面の下半分にある「システム環境変数」(System variables) セクションにある変数 Path の行を選択し、編集ボタンをクリックします。

次に、表示された「環境変数の編集」(Edit environment variable) 画面の左側にある「新規」(New) ボタンをクリックし、

C:\src\flutter\bin を入力して追加します。

環境変数の設定確認

パスを追加できたら、コマンドプロンプトを起動し、where.exe flutter コマンドで Flutter のパスが通っているかどうかを確認します。

コマンドプロンプトは windows キー を押して、 cmd で検索すれば表示されます。

# 現在使用されているflutterのパスを表示させる
where.exe flutter 

以下のような結果が表示されたら、Flutter のパスが通っていることを意味していて、コマンドプロンプトで Flutter コマンドが使えるようになります。

C:\src\flutter\bin\flutter
C:\src\flutter\bin\flutter.bat

パスが通っていない場合、where.exe flutterINFO: Could not find files for the given pattern(s) というエラーが表示されます。これまでの手順をもう一度確認してください。

周辺の環境整備

Flutter 単体だけでは開発できません。

以下のコマンドを入力すれば、Flutter で開発するのに必要な環境が揃っているかを診断してくれます。

flutter doctor

このコマンド入力で、以下の画像のように 5 つの項目の診断結果が表示されます。

例えば、一番上の項目「Flutter」は Flutter 本体が正確にインストールできているかどうか意味してます。

画像で指示されている「Android toolchain」及び「Android Studio」のエラーを消すために、Android Studio のインストールと設定が必要になります。

Android Studio のインストール

Android Studio 公式サイト から最新版の Android Studio ダウンロードし、インストールします。

インストール完了後、Flutter に Android Studio のパスを設定します。

コマンドプロンプトで以下のコマンドを実行した後、もう一度 flutter doctor を実行すると、以下のように 「 Android Studio 」 項目にチェックが付きます。

flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"

上記のパスは Android Studio のデフォルトパスとなっています。インストールパスを変更した場合、変更後のパスで置き換えてください。

Android toolchain の解決

アンドロイドを開発するのに一部ライセンスに承認する必要があるため、コマンドプロンプトに以下のコマンドを入力し、 全てのライセンス事項に同意する必要があります。

flutter doctor --android-licenses

初めて Android Studio をインストールする場合、 Android Studio を起動し、 Configure -> SDK manager -> SDK Tools タブで 「 Android SDK Command-line Tools 」 をインストールしてから以上のコマンドを実行する必要があります。

途中で「承認しますか( Accept? )」を聞かれたら、キーボードで 「 y 」を入力して、「 Enter 」キーを押せば承認することになって次に進みます。

全てのライセンスを承認したら、コマンドプロンプトを閉じてからもう一度起動して、 flutter doctor を入力すると、

下の図のように、項目「 Android toolchain 」にもチェックがつきました。

設定完了

これで Windows OS での Flutter インストールが完了しました。

Android Studio で Flutter の開発を行うための設定は「 Android Studio を設定する 」に進んでください。

参考リンク