Flutter の開発完了をつくる

ということで、Flutter でスマホアプリを開発する為の環境を構築していくのです。
開発環境は Windows にセットアップしていきます。

Flutter SDK のセットアップ

以下の手順で Flutter SDK をセットアップします。

Flutter SDK の入手

Flutter 公式 から 「flutter_windows_*.zip」をダウンロードして、適当なディレクトリにファイルを展開します。(今回は「C:\flutter」に展開)


下記の手順で Flutter SDK のパスを環境変数に追加します。

  1. 「Windowsキー + R」から「sysdm.cpl」を実行して「システムのプロパティ」を表示
  2. 「システムのプロパティ」「詳細設定」「環境変数」を選択
  3. 「Path」「C:\flutter\bin」を追加

flutter doctor で環境をチェック

コマンドプロンプトで「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 の日本語化やポータブル化します。ポータブル化するまずは VSCode をポータブル化していきます。ポータブル化とは?「ポ

VSCode への flutter 拡張機能のインストール

VSCode のサイドバーから拡張機能ボタン(画像赤丸部分)を選択します。



これで、flutter でスマホアプリを開発する環境ができたので、アプリを開発していくのです。