windows Flutter環境構築

Flutterについて

まず簡単にFlutterの説明から。
Flutterとは、モバイルアプリを開発するためのフレームワークのことを指します。
1つのプログラミング言語「Dart」でiOS、Android両方のアプリ開発ができることが特徴です。

Flutter　SDKをダウンロードして解凍し、環境変数を設定をします。

下記のサイトにアクセスして、「flutter_windows_2.10.5-stable.zip」をダウンロードし、解凍します。
https://flutter.dev/docs/get-started/install/windows


アーカイブソフトを使って解凍を行います。
Cドライブ直下へフォルダを配置します。（C:\Program Files以外の場所を推奨）
自分は下記に配置しました。
C:\flutter
※「flutter_windows_2.10.5-stable」フォルダは含めない

環境変数のPATHを設定する
Windowsのシステム環境変数に下記のパスを追加します。

C:\flutter\bin

設定されているかを確認します。
コマンドプロンプトで下記のコマンドを実行します。

flutter doctor

表示がでて、「Flutter」にチェックが入っていれば問題ありません。

Android Studioのダウンロード

下記のサイトにアクセスします。
https://developer.android.com/studio?hl=ja#downloads
ボタン「Download Android Studio」をクリックし、利用規約に同意してダウンロードします。※2022/04/23時点では、2021.1.1 Patch 3


インストール
デフォルトのまま、「Next」をクリックしていきます。



引き続きデフォルトのまま、「Next」 をクリックしていきます。

「Finish」 をクリックします。


設定はインポートしない「Do not import settings」を選択し、「OK」をクリックします。


Welcome画面で「Next」ボタンを押します。
Install Type　Standard　「Next」ボタンを押します。

Select UI Theme　どちらでも良いのでお好みで　「Next」ボタンを押します。


Verify Settings画面　「Finish」ボタンを押します。


Downloading Components画面　「Finish」ボタンを押します。


「Welcome to Android Studio」画面で左側のメニューから「Plugins」を選択します。


設定
「Welcome to Android Studio」の画面で
左側のメニューから「Plugins」を選択
「Flutter」をインストール
「Dart」をインストールします。


左側のメニューから「Projects」を選択
「More Actions」を選択、「SDK Manager」を選択


タブ「SDK Platforms」を選択し、
「SDK Platforms」で「Android10.0」にチェックをいれて「OK」を押します。


「SDK Tools」で「Android SDK Command-line Tools [latest]」にチェックをいれて「OK」を押します。


プロジェクト作成
「Welcome to Android Studio」の画面に「New Flutter Project」が表示されるので選択します。


左側のメニューから「Flutter」を選択します。
「Flutter SDK path」を設定

C:\flutter

「Next」を選択します。
Project name：test123
それ以外の設定はデフォルトのままとします。
「Finish」を選択したらプロジェクト作成完了です。



エミュレーターのデバイスを作成する
メニューから　Tools　＞　Device Manager　を選択


「Create device」を選択


「Pixel2」を選択、「Next」を選択
「Android 10.0(Google Play)」を選択、「Next」を選択します。


「Finish」を選択


作成されたエミュレーターの三角の実行ボタンを押すと、エミュレーターが表示されます。


動作確認
Android Studio 上部にある、実行ボタン（緑色の三角）を選択します。
エミュレーターでアプリが表示されば動作確認完了です。

Visual Studio Codeの設定

FlutterにAndroidStudioのパスを設定します。
コマンドプロンプトで下記のコマンドを実行し、コマンドプロンプトを閉じます。

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

コマンドプロンプトで下記のコマンドを実行します。

flutter doctor

Android Studio にチェックが入っていれば問題ありません。



ライセンス
コマンドプロンプトで下記のコマンドを実行します。

　　flutter doctor --android-licenses

確認で y を入力してエンターを押します。（何度か聞かれるのでエンターを押してください。）
下記のコマンドを実行します。

　　flutter doctor

　　Android toolchain - develop for Android devicesにチェックが入っていれば完了です。

　
Visual Studio Codeを起動します。（事前にインストールされている想定）


拡張機能で「Flutter」をインストールします。
　F1キーを押す、「Flutter: New Project」を選択


「Application」を選択


ソースを配置する場所を指定します。
アプリケーション名を記述してエンターを押します。


　確認ダイアログで
　「はい、作成者を信頼します」を選択します。


　ソース一式が生成されます。


実行する環境を指定します。
　画面右下の文字を選択。「Windows(windows-x64)」等が表示されています。


リストからAndroidStudioで作成したデバイスを指定します。
今回のケースでは「Start Pixel 2 API 29 moble emulator」を指定しています。
Androidエミュレーターが起動します。


画面左側のアイコンから「実行とデバッグ」を選択し、
「実行とデバッグ」のボタンを押します。
しばらく待ちます。

エミュレーターにアプリの画面が表示されたら完了です。
これでVisual Studio Codeでの開発が行うことができます。

■参考
・公式サイト（英語）
https://flutter.dev/docs/get-started/install/windows