Flutter 環境構築

Flutter による開発環境の作り方を説明します。Android Studio の拡張機能としてセットアップしますので、先に Android Studio のインストールを済ませておいてください。

ダウンロード

Flutterの公式ページから Flutter の SDK をダウンロードします。[Get started] のボタンを押すとOSの選択画面になりますので、パソコンに応じて Windows か macOS を選んでください。

SDK のインストール方法の説明画面が表示されるのでその手順に従います。”Get the Flutter SDK” というタイトルのあたりに zip ファイルのリンクがありますのでダウンロードしてください。zip ファイルを展開すると flutter という名前のフォルダがありますので、これを適当な場所に置きます。Windows なら例えば C:\flutter377 に（Flutterのバージョンがわかるように末尾に数字を付けると良いです）、Mac なら例えば ~/flutter377（ホームディレクトリの下）に置くと仮定します。

パスを通す

Windows の場合

スタートメニュの歯車アイコンから設定に入り、［システム] ＞ [バージョン情報] > [システムの詳細設定] と進んで [環境変数] のボタンを押します。

“Path” を選んで [編集] ボタンを押します。

[新規] を押すと編集できるようになるので、展開したファイルを置いた場所、今回の例では C:\flutter377\bin と設定して [OK] > [OK] > [OK] ボタンで閉じます。（次のスクリーンショットは設定したフォルダ名が異なるかもしれません）

これで完了ですが、設定内容を反映させるためにWindowsを一旦ログアウトしてログインし直してください。またはパソコンの再起動でもOKです。

Mac の場合

ホームディレクトリの ~/.zshrc ファイルを開いて、次の１行を追加します。”ユーザー名” のところは Mac にログインするときのユーザー名です。”flutter377″ のところは展開したファイルを実際に置いた場所に読み替えてください。

export PATH="/Users/ユーザー名/flutter377/bin:$PATH"

1	export PATH="/Users/ユーザー名/flutter377/bin:$PATH"

flutter doctor を実行する

flutter doctor はFlutterの動作環境が妥当かどうか判断してくれるツールです。Windows なら PowerShell で、Mac ならターミナルで次のコマンドを実行します。

$ flutter doctor

1	$ flutter doctor

Flutterの環境に問題があれば “✗” マークと共にメッセージが表示されますので指示に従ってください。

JAVAのインストールを促された場合は、必ず Java 8 をインストールしてください。メッセージ中に表示されるURLを辿ると Java 16 に誘導されますが、FlutterはJava 8でないと動作しません。Java 8のWindows版のダウンロードはこちらです。ダウンロードするにはOracleのユーザー登録・メール認証が必要です。さらに、JAVA_HOMEという環境変数をJAVAのインストールフォルダに設定してください。JAVA_HOMEは［システム] ＞ [詳細情報] > [システムの詳細設定] > [新規] で作成できます。
次のようなメッセージが表示された場合は、

[✗] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

1	[✗] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

次の３つのコマンドを順次実行してください。

$ flutter channel
$ flutter channel master
$ flutter upgrade

$ flutter channel

$ flutter channel master

$ flutter upgrade

次のメッセージが表示された場合は、

[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.25)
    ✗ Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.25)

✗ Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop

development with C++" workload, and include these components:

MSVC v142 - VS 2019 C++ x64/x86 build tools

- If there are multiple build tool versions available, install the latest

C++ CMake tools for Windows

Windows 10 SDK

Visual Studio 2022 が必要なので、https://visualstudio.microsoft.com/ja/ から Visual Studio 2022 Community をインストールします。インストール開始時、次のような画面になりますのでメッセージで指摘された「C++によるデスクトップ開発」を忘れずにチェックしてください。

次のようなメッセージが表示されることがあります。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)

X Android license status unknown.

Run `flutter doctor --android-licenses` to accept the SDK licenses.

See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

このときは [File] > [Settings…]（Macの場合は[Android Studio] > [Preferences…]）を開き、[Appearance & Behavior] > [System Settings] > [Android SDK] と進み、[SDK Tools] のタブの中の、
・Android SDK Build-Tools
・Android SDK Platform-Tools
・Android SDK Command-line Tools
の３箇所をチェックを入れて [Apply] > [OK] を押します。Android Studioを終了してから flutter doctor –android-licenses のコマンドを実行してください。Androidのライセンス情報が表示されますので、すべて確認すると（”y” → “Enter” と入力する）上記のエラーは消えるはずです。

また、次のような警告が表示されることがあります。

[！] Android Studio (not installed)

1	[！] Android Studio (not installed)

これは警告なので動作に支障はありませんが、次のコマンドで解決できます。

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

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

Xcode をインストールする（Macだけ）

Mac の場合は iPhone の開発環境である Xcode をインストールしてください。App Store で “Xcode” を検索すると見つかります。ダウンロードには時間がかかります。インストールできたら起動してください。いくつか確認の画面が現れ、”Welcome to Xcode” の画面まで来たら一旦閉じてください。

iPhoneのアプリを開発するにはXcodeが必須ですが、XcodeはMacでのみ動作します。Windows用のXcodeは存在しません。つまり、iPhoneアプリを開発するにはMacが必須になります。

iPhoneアプリの開発予定がある場合は、さらにCocoapodsもインストールしてください。

$ sudo gem install cocoapods

1	$ sudo gem install cocoapods

Android Studio に Flutter プラグインを入れる

Android Studio を起動して Wellcome to Android Studio の画面で、左ペインから [Plugins] を選択するとプラグインのインストール画面になります。Android Studio内部の設定画面から [Plugins] を開いても同じ画面になります。ここで “Flutter” を検索してインストールします。プラグインの依存性のため “Dart” が必要だと警告が出た場合は同時にインストールします。

[Restart IDE] のボタンが現れるので Android Studio を再起動します。

“New Flutter Project” というメニューが現れたら正常です。

サンプルアプリを動かす

AndroidStudioの起動画面で上部の [New Flutter Project] ボタンを押して、左ペインから “Flutter” を選びます。”Flutter SDK path” の項目には「パスを通す」で設定したパスを記入します。ただし、”/bin” は付けません。[Next] ボタンを押してください。

次の画面の設定項目はアプリをテスト的に動かして見るだけならデフォルトのままでも構いません。それぞれどのような意味なのかは理解しておいてください。

アプリの名前は、小文字の英字・数字とアンダーバーを使って入力します。それ以外の文字種を使うと後で面倒なので使わないでください。
“Project location” はプロジェクトのデータを保存する場所です。
“Organization” は、作成したアプリを識別するために参照される情報なので、自分が保有するするドメインなどユニークな名称を使ってください。例えばドメイン名が sample.com なら com.sample のように逆順に記述します。

[Create] のボタンを押して少し待つとプロジェクト画面が開きます。

Android Studio のインストールの手順を完了していれば既に Android のエミュレータがインストールされているはずです。AVDのボタンから起動してください。

▶ボタンでアプリを動作させると、ビルドプロセスが暫く走って、エミュレータ上でアプリが起動します。「＋」ボタンを押すと数字が増えます。

iPhone のシミュレータを使う（Macだけ）

Mac の場合は上部のデバイスを選択するメニューに [Open iOS Simulator] というメニューがあるはずなのでこれを選びます。

デバイスに iPhone が選ばれていることを確認します。

▶ボタンでアプリを動作させると、ビルドプロセスが暫く走って、シミュレータ上でアプリが起動します。「＋」ボタンを押すと数字が増えます。

ターミナルからシミュレータを起動することもできます。

$ open -a Simulator

1	$ open -a Simulator

シミュレーションする機種を変更したい場合は File メニューから異なる機種を選んでください。

Visual Studio Code の環境設定

以上でAndroid Studioを使ってFlutterアプリを開発する環境ができました。Android StudioではなくVisual Studio Code（以下、VSCodeと呼びます）で開発したい場合は以下の手順を実行してください。FlutterはVSCodeも公式にサポートしています。VSCodeのほうが軽量なので、Android Studioが思いと感じるようならVSCodeを試してみると良いでしょう。

VSCodeそのもののインストールはこちらを参照してください。VSCodeを起動したら左下の歯車アイコンから [拡張機能]（日本語化していない場合は [Extensions] です）を選び、”Flutter” のキーワードで検索してください。

“Flutter 3.xx.x Flutter support and debugger for Visual…” というものが見つかったらインストールします。

さらに “dart” で検索すると出てくる “Dart” の拡張機能もインストールしてください。その他、好みに応じて拡張機能を入れればよいです。

Flutter（必須）
Dart（必須）
Code Spell Checker（タイポの防止）
Firebase（セキュリティルールを書くときに便利）
Live Share（複数人でリアルタイム共同編集できる。音声通話の拡張機能も別途入れると便利）
Thunder Client（http通信のテストが簡単にできる）
vscode-icons（見栄えがいいかんじに）

Android Studio の場合はGUIメニューからプロジェクトを作りますが、VSCode ではコマンドを使います。こんな感じです。

$ flutter create --org com.example sample

1	$ flutter create --org com.example sample

ビルドするときのオプションは vscode/launch.json に記述します。

実行は flutter run コマンドです。あるいは、左端に並んでいる「▷」に虫が付いたアイコンを実行するとデバッグモードで実行します。

VSCode の青い下枠の右端あたりにデバイス名を表示しているところがあるので、そこをクリックするとデバイスの選択肢が表示されます。”Create Android Emurator” を選ぶとエミュレータが起動するので、その状態で flutter run すればエミュレータ上で動作します。

iPhoneシミュレータの起動は open -a simulator

バージョン管理

Android Studioのメニューの [VCS] の中にバージョン管理ツールがあります。GitHub等でバージョン管理をしたいなら、[VCS] > [Enable Version Control Integration…] を選択し、表示された選択肢から “Git” を選んで [OK] してください。Android Studioのウインドウ下部に “9: Git” というタブが表示されるようになり、Git管理機能が使えるようになります。しかし…

Android Studioに内蔵されたGit管理機能を使うこともできますが、GitやGitHubはFlutter以外でも使います。Flutterのためだけに異なるツールを覚え直すのは無駄です。一般的なGitコマンドやSourceTreeなどのGUIツールを使うことをお勧めします。詳しくはこちらを参照してください。

.gitignoreファイル（Gitの管理下にすべきではないファイルの一覧を記述したもの）についてはFlutterのプロジェクトを作成したときに自動的に作ってくれるので、それを元に編集すれば良いです。GitHubのリポジトリをPublic（公開するように設定）する場合は、くれぐれも、使用するWEBサービスへのアクセスキーなど、セキュリティに関わる情報がGitHubにプッシュされてしまわないように注意してください。例えばFirebaseを使う場合は、android/app/google-services.json や ios用のGoogleService-Info.plist等のファイル名を.gitignoreファイルに追記して、これらはGit以外の方法で管理すべきです。

GitHubを使う

GitHubに登録されたサンプルプログラムを動作させる手順を説明します。この手順はGitHubのアカウントを持っていることが前提になります。持っていない場合は GitとGitHub のページを参考にしてアカウント登録しておいてください。

ダウンロードしようとしているGitHubのレポジトリをブラウザで確認し、そのURLをコピーしておいてください。リポジトリの属性がPrivateに設定されている場合は承認が必要ですので、その管理者に依頼してください。

WindowsならPowerShell、MacならTerminalで、Android Studioのプロジェクトが保存されるフォルダに移動します。通常はWidnowsなら C:\ユーザー\(ユーザー名)\AndroidStudioProjects、Macの場合は ~/AndroidStudioProjects です。すでにテスト用にプロジェクトを作成した場合はその名前のフォルダが存在するはずです。そのフォルダで、先程コピーしたURLを使って git clone コマンドを実行します。例えばこのようにします。

$ git clone https://github.com/kogehipo/flutter_app

1	$ git clone https://github.com/kogehipo/flutter_app

リポジトリの名前で新しいフォルダーが作られるはずです。

git clone コマンドを使わない方法もあります。ブラウザでGitHubのリポジトリを表示した状態で、ZIPファイルをダウンロードして解凍し、上記と同じようにファルダを配置してください。

Android Studio を起動して [Open] メニューから作成したフォルダを開いてください。開いたプロジェクト直下の pubspec.yaml や lib/main.dart の状態を確認してください。Android StudioがSDK等のインストールするようにメッセージを表示する場合は、その指示に従ってください。

“Download Dart SDK” と表示される場合は、上記の手順を終えていればDartはFlutterのSDKに含まれていますので、Flutterを置いたフォルダ以下の例えば C:\flutter223\bin\cache\dart-sdk をDart Setting（[File] > [Settings] > [Languages & Frameworks] > [Dart]）に記述すればOKです。

SDKの依存性（Dependencies）に問題がるようなら、pubspec.yamlのタブに表示される”Pub get”をクリックしてください。

WEBアプリ

FlutterはWEBアプリをビルドすることもできる。

ターミナルでFlutterのプロジェクトのフォルダーに入る。

$ cd (Flutterプロジェクトのフォルダー)
$ flutter create .
$ flutter build web

$ cd (Flutterプロジェクトのフォルダー)

$ flutter create .

$ flutter build web

build/web に生成されたファイルをWEBサーバに配置すれば動作する。