ということで、Flutter でスマホアプリを開発する為の環境を構築していくのです。
開発環境は Windows にセットアップしていきます。
Flutter SDK のセットアップ
以下の手順で Flutter SDK をセットアップします。
Flutter SDK の入手
Flutter 公式 から 「flutter_windows_*.zip」をダウンロードして、適当なディレクトリにファイルを展開します。(今回は「C:\flutter」に展開)
環境変数の追加
下記の手順で Flutter SDK のパスを環境変数に追加します。
- 「Windowsキー + R」から「sysdm.cpl」を実行して「システムのプロパティ」を表示
- 「システムのプロパティ」で「詳細設定」→「環境変数」を選択
- 「Path」に「C:\flutter\bin」を追加
flutter doctor で環境をチェック
「C:\flutter\flutter_console.bat」を実行するとコマンドプロンプトが開きます。
コマンドプロンプトで「flutter doctor」を実行すると下記のような画面が表示されます。
Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.17763.914], locale ja-JP) [X] Android toolchain - develop for Android devices X Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location. You may also want to add it to your PATH environment variable. [!] Android Studio (not installed) [!] Connected device ! No devices available ! Doctor found issues in 3 categories.
Android Studio のセットアップ
以下の手順で Android Studio をセットアップします。
Android Studio の入手
android studio 公式 から「android-studio-ide-*-windows.exe」をダウンロードしてインストールします。
android studio をインストールした直後に「flutter doctor」を実行すると下記が表示されることがあります。
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) X Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
ライセンスの同意が必要なので指示通り「flutter doctor –android-licenses」を実行しましょう。(「Accept? (y/N): 」と聞かれるので「y」を入力していきます)
Android Studio への flutter プラグインのインストール
開発(コーディング・デバッグ)に VSCode を使用する場合はこの手順は不要です。
「flutter doctor」を実行すると下記の警告が表示されます。
[!] Android Studio (version 3.6) X Flutter plugin not installed; this adds Flutter specific functionality. X Dart plugin not installed; this adds Dart specific functionality.
Android Studio に Flutter と Dart のプラグインをインストールする必要があるので以下の手順でインストールします。
Android Studio の初期画面で右下の「Configure」から「Plugins」を選択します。
「flutter」 を検索してインストールします。
インストール後に Android Studio を再起動すると 「flutterプラグイン」がインストールされます。「flutterプラグイン」をインストールすると「Dartプラグイン」も自動でインストールされるので追加インストールは不要です。
VSCode のセットアップ
以下の手順で VSCode をセットアップします。
開発(コーディング・デバッグ)に Android Studio を使用する場合はこの手順は不要です。
VSCode の入手
Visual Studio Code 公式 から「VSCodeUserSetup-*.exe」をダウンロードしてインストールします。
ポータブル環境としてインストール+日本語化する方法は↓の記事に書いてます。

VSCode への flutter 拡張機能のインストール
VSCode のサイドバーから拡張機能ボタン(画像赤丸部分)を選択します。
「flutter」を検索して拡張機能をインストールします。
おしまい
これで、flutter でスマホアプリを開発する環境ができたので、アプリを開発していくのです。
コメント