Flutter とは、スマホアプリやウェブアプリ、デスクトップアプリ等のネイティブアプリを単一のコードから作成できるUIフレームワークです。私がこよなく愛しているGoogle製。
開発環境
- Windows 10 Home 21H1
- Flutter 2.5.1
- Android Studio 2020.3.1.24
- Android SDK 31.0.0
- Android SDK Command-line Tools 5.0
- VS Code 1.60.2
Windows に Flutter をインストール
Windows に Flutter をインストールします。インストールと言っても FlutterSDK を適当なフォルダに展開してパスを通すだけ。
ダウンロード
まず 公式サイト から「flutter_windows_2.5.1-stable.zip」をダウンロードします。
今回は分かりやすくCドライブの直下に展開しました。
パス設定
コマンドプロンプトから Flutter のコマンドを使えるようにするためパスを設定します。パスを通すと言う作業ですね。
コントロールパネルのシステム画面を開いて、システムの詳細設定を選択します。
システムのプロパティが開くので、詳細設定タブの「環境変数」を選択します。
ユーザ環境変数の「Path」を選択してから「編集」ボタンをクリックします。
環境変数名の編集画面で Flutter を展開した場所の「bin」フォルダを設定してあげます。今回はCドライブの直下に展開したので「C:\flutter\bin」を設定しました。
終わったら「OK」ボタンを押して全ての画面を閉じます。
動作確認
最後にコマンドプロンプトに下記コマンドを入力して動作確認と依存環境のチェックをします。
1 | flutter doctor |
Flutter は正しく動作しているみたいですが、Android Studio がインストールしていないため × が出ちゃってますね。
Android Studio をインストール
Android Studio がいるみたいなのでインストールします。
まず、公式サイト から「android-studio-2020.3.1.24-windows.exe」をダウンロードします。
ダウンロードしたアイコンを実行して Android Studio をインストールします。
特に設定は変えず「Next」を押していけばインストールできます。
インストールが終わったら一度実行しておきましょう。
インポートするものは無いので「Do not import settings」を選んで「OK」を押します。
使用状況を匿名で送信するかの確認です。気になる人は「Don’t send」を選択すれば送信しない設定になります。
ここまで進めたら再度 Flutter の依存環境チェックをします。
Android Studio は OK になったんですがまだ Android toolchain が × のままですね。もう少し設定が必要そうです。
セットアップウィザード
Android Studio のセットアップウィザードを完了させないとダメそうなので「Next」ボタンを押して作業を続行します。
特に気にしないので「Standard」を選択したまま「Next」ボタンを押して、
UIのテーマはお好みで、私はダーク系が好きなのでこのままです。
最後にインストールされる内容が一覧で表示されます。問題なければ「Finish」を押してセットアップ開始になります。
セットアップウィザードが終わったら 再度 Flutter で依存環境をチェックします。
今度は2つ × が付いちゃいました。1つづつ解消していきましょう。
- cmdline-tools component is missing
- Android license status unknown.
cmdline-tools component is missing
こちらのエラーは SDKマネージャーを使って アンドロイドのコマンドラインツールをインストールしろってことだと思います。
Android Studio のスタートメニューから「More Actions」をクリックして「SDK Manager」を選択します。
「SDK Tools」タブを選択し「Android SDK Command-line Tools」にチェックを入れて「OK」ボタンでインストール開始します。
最終確認ダイアログでも「OK」ボタンを押します。
ライセンスにも同意しておきます。
コマンドラインツールのインストールが終わったら再度 Flutter で依存環境をチェックします。
コマンドラインツールのエラーは消えましたね。
Android licenses not accepted.
これは簡単、アンドロイドライセンスに同意してね。ってことです。
コマンドプロンプトで下記コマンドを実行してアンドロイドライセンスに同意しましょう。
1 | flutter doctor --android-licenses |
こんな画面が出たら「Y」キーを入力してエンターキーを押します。
ちなみに、大文字で書かれて方が何も入力しないでエンターキーを押したときに送信されるキーです。
7回同じ操作が続きます。
「All SDK package licenses accepted」と表示されれば完了です。
最後に依存環境をチェックします。
全てにチェックが入って問題なく使える状態になりました。
終わりに
今回はウェブ用に開発していく予定なので、Androidエミュレーターのインストールや Visual Studio 2019 のインストールはやりません。
必要になったらその時にインストールすることにします。
既にインストールしてあった VS Code や Java は説明出来てませんが、同じ要領インストールしてみて下さい。