この記事を読むのに必要な時間は約 11 分です。
この記事ではWindowsでのFlutter 環境構築からデモアプリの起動まで解説します。
Windows11 でも問題なく環境構築できることを確認済みです。
SDKとはプログラム、API、サンプルコードなどをパッケージしたもです。
導入することでflutterコマンドなども使用可能になります。
①Flutter SDKのダウンロード
まずは公式サイトよりFlutter SDK のWindows版をダウンロードします。
ダウンロードファイルを任意のフォルダで解凍します。
例えば、Cドライブ直下にflutter というフォルダを作成し、その中で解凍しましょう。
②PATHを通す
解凍したFlutter SDKフォルダの配下にあるbinのパスを環境変数に設定します。
環境変数に設定することで端末でのflutterコマンドの実行が可能になります。
コントロールパネル > システムとセキュリティ > システム > システムの詳細設定 > 環境変数でユーザ環境変数のPathに追加します。
これでFlutter SDKのインストールは完了です！
③flutter doctor を実行
端末を開き、「 flutter doctor」 を実行します。
※実行できない場合は②PATHを通すが完了しているか確認して下さい。
flutter doctor
これはFlutterの環境構築状況を確認するためのコマンドです。よく使うので覚えてしまいましょう。
下記のように表示されたと思います。✖️マーク、！マークの項目が未インストールものです。
※Xcodeの項目はiOS用なのでWindowsでは無いです。
Android Studio はアプリの実行に必要なAndroid エミュレータのセットアップと起動や、プロジェクトファイルを作成などが可能な統合開発環境（IDE）です。VS code からAndroid エミュレータを立ち上げるためにもインストール必須です。
①Android Studio のダウンロード
公式サイトよりAndroid Studio の利用規約を確認し、実行ファイルをダウンロードします。
規約の下部にAndroid Studio のバージョンを選ぶ箇所があります。
ダウンロードしたexeファイルをダブルクリックしましょう。
セットアップ画面が開くので進めていきます。「Standard」を選択し、「Next」をクリックします。
※画像はiOSのセットアップ画面ですがWindowsでも同様です。
好みですが「Darcula」を選択すると見やすいです。「Next」をクリックします。
components のダウンロード画面になるのでダウンロードし、Finish。
「Install」をクリックすると、Android Studio のインストールが開始します。終了したら「Finish」をクリックします。
※旧バージョンのAndroid Studio を使用していた場合は、設定をインポートすることができます。
表示が出た場合は「Do not import settings」をチェックして「OK」をクリックします。
Android Studio を起動すると下記のように表示されると思います。インストールはこれで完了です！
②Flutterプラグインをインストール
Plugins タブからFlutter と検索しInstall します。このときDartも同時にinstall されます。
終わったらRestart IDE で再起動しましょう。
③Android toolchain のエラー対応
「flutter doctor」 を実行して環境構築の状況を確認しましょう。
まだ下記のようにAndroid toolchain の項目に！マークがついていると思います。
Doctor summary (to see all details, run flutter doctor -v):
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.
※他の項目は省略しています。$ flutter doctor –android-licensesを実行すれば！マークは消えるはずですが、その前にSDK Manager、SDK Toolsタブで「Hide Obsolute Package」のチェックが外し、「Android SDK Command-line Tools」にチェックがついていることを確認して下さい。
「Android SDK Command-line Tools」のチェックを確認の上、下記コマンドを実行して下さい。
flutter doctor --android-licenses
これで「flutter doctor」 のandroid toolchain 項目がチェックされたと思います！
VisualStudio code ではAndroid Studio で作成したエミュレータの起動やプロジェクトファイルの作成が行えます。
Android Studio より軽量で起動が速く、プラグインも豊富なことから、自分含めて多くの開発者に使用されています。
インストールは必須ではありませんが、便利なのでAndroid Studioと気分で使い分けましょう。
①VisualStudio Code のダウンロード
公式サイトからVisualStudio code をダウンロードします。
ダウンロードしたexeファイルをダブルクリックしてセットアップを進めましょう。これでインストール完了です。
②Flutterプラグインをインストール
VisualStudio codeを起動して「Extensions」タブでFlutter と検索しインストールしましょう。このときDartもインストールされます。
VisualStudio codeのインストールは完了です！
Android エミュレータを例にデモアプリを起動します。
①Android Studio での起動
まずはプロジェクトフォルダを作成しましょう。例えば、Cドライブ配下で端末から下記コマンドを実行します。
「 flutter create 任意のフォルダ名」はFlutterのプロジェクトファイルを作成するコマンドです。
mkdir work //今後このフォルダ下にプロジェクトを作成していきます。 cd work mkdir flutterApp //ここが今回のプロジェクトフォルダです。 cd flutterApp flutter create first_app
Android Studio を起動しOpen からfirst_app を選択します。
Flutter/Dart のプラグインがインストールできているのに「Dart SDK is not configured」と表示される場合はSDKの設定ができていません。「Open Dart settings」をクリックします。
「Flutter」タブからFlutter SDK path にFlutter SDK のフォルダパスを設定します。
次にAndroid エミュレータの設定を行います。右上のアイコンからAVD Manager を開きましょう。
「Create Virtual Device」をクリック。
任意のハードを選択、「Next」をクリック。
任意のAPI (Pie以降を推奨) をダウンロードし選択、「Next」をクリック。
そのまま「Finish」をクリック。
元の画面に戻るので再生ボタンを押してデバイスを起動します。
下記のようにスマホ画面が起動できます。また、「Open Android Emulater：デバイス名」からも起動可能です。
デバイスが起動できても、下記のように表示された場合はプロジェクトSDKの設定が必要です。
「File」から「Prohect Structure」をクリック。
「Project」タブ、Project SDK で作成したデバイスを選択します。
flutter run を端末かAndroid Studio内のTerminalで実行してカウンターアプリが表示されれば起動成功です！
flutter run
※Android Studio内のTerminalは下記からアクセスできます。
②Visual Studio Code での起動
VS code でプロジェクトフォルダを開き、アンダーバーからDart言語を選択。デバイスを選択します。
端末かVS Code内のTerminal で「flutter run」を実行しAndroid Studio 同様に実行できれば成功です！
※VS Code内のTerminal は下記からアクセスできます。
以上です。
コメント