MacにFlutterをインストールしてデスクアップアプリを開発する手順とトラブルシューティング

開発環境に使用するツール

IDE：Visual Studio Code（VSCode）

Macのデスクトップ開発・iOSアプリの開発をする場合は、Xcodeも必要。
Androidアプリ開発をする場合は、Android Studioも必要。

VSCodeに拡張機能を導入

まず、VSCodeにFlutterの拡張機能をインストールします。

Flutterのインストール

[Command]+[Shift]+[P]でコマンドパレットを開き、Flutter: New Projectを選択。

画面右下に、SDKのインストールを促す通知が表示されるため、「Download SDK」をクリックする。

SDKのインストール先を尋ねるダイアログが表示されるため、任意の場所を選択する。
今回は、公式の手順に従いユーザーホームのdevelopmentをインストール先に選択する。

インストールが環境したら、~/.zshenvに次の行を追加し、環境変数PATHにFlutterのインストール先のパスを設定する。

echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.zshenv

ターミナルを再起動するか、次のコマンドで変更した~/.zshenvを再読み込みする。

source ~/.zshenv

Xcodeのインストール

FlutterでMacのデスクトップアプリを開発する場合、Xcodeのインストールが必要。
そのため、App StoreからXcodeをインストールする。

次のコマンドを実行して、インストールされているバージョンの Xcode を使用するように構成します。

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

Xcode ライセンス契約に署名します。

sudo xcodebuild -license

CocoaPodsのインストール

CocoaPodsは、iOS/Macアプリ開発向けのプロジェクトの依存関係マネージャーです。
次のコマンドでCocoaPodsをインストールします。

sudo gem install cocoapods

インストール時にエラーが出たら？

インストール時に次のメッセージが表示された場合、MacにインストールされているRubyのバージョンが古い可能性がある。
MacにはデフォルトでRubyがインストールされているが、古いバージョンの場合、CocoaPodsがインストールできない。

ERROR:  Error installing cocoapods:

The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again

drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

このエラーを解消するために、rbenvを導入して新しいバージョンのRubyをインストールする。

rbenvをインストールする

まずは、rbenvのバージョン確認コマンドを入力し、rbenvのインストール有無を確認する。

rbenv -v

インストールされていなければrbenvをインストールする。

brew install rbenv

インストール可能なRubyを確認。

rbenv install -l

先ほどのエラーでは、バージョン2.7.0以上のRubyが必要とのことだったので、インストールできるRubyの中から要件を満たすRubyをインストールする。

rbenv install 3.0.7

rbenvにインストールされているRubyのバージョンを確認する。

rbenv versions

~/.zshrcに以下の行を追加し、使用するRubyをシステムデフォフォルトのRubyからrbenvに切り替えます。

eval "$(~/.rbenv/bin/rbenv init - zsh)"
export PATH="$HOME/.rbenv/shims:$PATH"

グローバルで使用するRubyを、先ほどダウンロードした3.0.7に切り替えます。

rbenv global 3.0.7

ターミナルを再起動した後に、Rubyのバージョンが上記で指定したバージョンに切り替わっているか確認します。

ruby -v

最後に、次のコマンドでCocoaPodsをインストールします。

sudo gem install cocoapods

こんな感じでメッセージが出ていればインストール成功です。

「flutter doctor」でインストール状況をチェック

flutter doctorコマンドは、flutterと関連ツールのインストール状態をチェックするツールです。
今回は、デスクアップアプリの開発環境が作れればいいので、iOSのシュミレーターやAndroid Studioのツールでチェックエラーになってても問題ないです。

プロジェクトの作成

プロジェクト用のフォルダを作成し、flutter create .で新規プロジェクトを作成します。

mkdir my_desktop_app
cd my_desktop_app
flutter create .

プロジェクトを作成すると、基本のテンプレートからコピーされた次のディレクトリができます。
各ディレクトリの役割は次の通りです。

1. /android - このディレクトリには、Androidアプリに特有のコードが含まれています。ここにはAndroid StudioのプロジェクトファイルやGradleスクリプトなどが格納されています。

2. /ios - iOSアプリ固有のコードを含むディレクトリです。Xcodeプロジェクト、設定ファイル、およびiOS固有のリソースがここに配置されます。

3. /lib - アプリケーションのDartコードが格納される主要なディレクトリです。このディレクトリ内で、ソースファイルを適切に管理し、機能ごとにファイルやサブディレクトリを分けることが推奨されます。

4. /test - テストコードを格納するディレクトリです。単体テストや統合テストなど、アプリケーションの品質を保証するためのテストスクリプトが含まれます。

5. /pubspec.yaml - プロジェクトのメタデータや依存関係を管理する重要なファイルです。Flutter SDKのバージョン、プロジェクトで使用する外部パッケージのリスト、アセットなどのリソースの指定がここで行われます。

6. /assets - 画像、フォント、ローカルデータファイルなど、アプリケーションが使用するリソースファイルを配置するディレクトリです。pubspec.yamlファイルで指定されたアセットがこのディレクトリに含まれます。

プロジェクトの実行

プロジェクトの実行は、flutter runコマンドを使用します。オプションに-d macosを指定し、Macのデスクトップアプリとしてビルド＆実行します。

flutter run -d macos

こんな感じのデモあぷりが起動すれば、成功です！！