やはりFlutterの難所は環境セットアップだった
はじめに
Flutterはモバイルアプリ開発において、iOSとAndroid両方とも開発できる点で人気ですよね。私もそんなFlutterにミーハーで手を出そうと考えて始めましたが、Flutterの開発環境のセットアップはかなりインストールするものが沢山あって大変でした。
Flutterを扱ってるエンジニアの多くの方が環境構築が一番難しいと言っていますが、本当にそうでしたね、、、
今回は私が踏んだ手順をまとめましたので、これから環境構築する方はご参考にしてください。
対象マシンとセットアップ目標
概要
- MacBook（Intel）へのセットアップの実録
- セットアップの目標はFlutterの環境チェックコマンド（flutter doctor）が通ること
- iOSとAndroid両方とも対応する環境を用意する
今回私がセットアップしたマシンはIntel CPUのMacBook Proです。「Intel Mac使ってるなんて古ーい」そう聞こえてきそうですが、はい。古いですがちゃんと使えますよ。購入は4年くらい前です。
Flutterの公式サイトではIntelとSiliconそれぞれ向けのインストーラーを用意していますので、ご自身のPCのCPUが何かを知っておきましょう。
Flutterの開発を始めるのは実に様々なものをインストールする必要があります。これら全てがきんと揃っていないといけません。そこでFlutterでは開発環境がちゃんと準備できているかを確認するコマンドが提供されています。それが「flutter doctor」コマンドです。
「flutter doctor」の実行は適当な階層でそのままコマンドを入力して実行するだけです。環境に不備がある場合はメッセージとともに指摘してくれます。インストールのヒントも掲載されるので「fluttor doctor」をこまめに実行することで確実に環境を準備することができます。
今回のセットアップの目標はiOSとAndroidの両方の開発環境の準備です。Flutterはクロスプラットフォームのフレームワークなので、両方準備した方が威力を発揮できます。
セットアップ手順
概要
- セットアップは公式に手順が掲載されている
- FlutterSDKは必須、iOSやAndroidによって必要なエディタを入れる
セットアップの手続きは公式サイトにしっかりと掲載されているので、こちらに従えば問題ありません。がしかし、公式には細かい話も様々に記載されていて迷ったり難しく感じることもあるので、改めて手順を掲載したいと思います。
インストールするもの
- Flutter開発環境（必須）
- Git
- Flutter SDK
- iOS開発環境（任意）
- Xcode
- iOSシミュレータ
- CocoaPods（最新のRubyもインストール）
- Android開発環境（任意）
- Android Studio
- Android toolchain
- エディタ
- VSCode（Flutter拡張機能もインストール）
- Android Studio
セットアップするものは、１つはFlutter SDKです。これはFlutter開発では必須になります。そしてiOSやAndroidの開発ツールです。開発ツールについては開発対象に合わせて必要なものを準備します。今回はiOSとAndroidの両方とも準備をしました。
Flutter SDKのインストール（いずれの開発でも必須）
Flutter SDKを準備する前に、まずはGitのインストールをしましょう。Flutterのコマンドラインツールは内部でGitを利用しているようなので、先にGitを入れちゃいます。多くの人がGitはインストール済みだと思うのでここは問題ないですね。
もしGitが入っていない状態でFlutterコマンドを実行するとインストールを促すダイアログが出るようです。私はGitはすでに入っていたのでこのダイアログは見たことありません。
Gitのダウンロードページはコチラ
Gitが準備できたらFlutter SDKをダウンロードしてきます。Flutterの公式サイトにダウンロードリンクがあります。ダウンロードの際は自身のPCに合うものを選びます。Macの場合はIntelとSiliconでダウンロードするものが別なので気をつけましょう。
Mac用 Flutter SDKのダウンロードとセットアップ手順はコチラ
Windows用 Flutter SDKのダウンロードとセットアップ手順はコチラ
Flutter SDKはZIPファイルで配布されています。ダウンロードしたら解凍して好きなフォルダに配置します。公式ではMacはホーム直下に「~/development/」フォルダを作成し解凍したflutterフォルダを配置するよう紹介されています。Windowsは「C:\Users{username}」フォルダや「C:\Users{username}\AppData\Local」に「dev」フォルダを作成し解凍したflutterフォルダ配置するよう紹介されています。
Mac
~/development/
flutter
Windows
C:\\Users\\{username}（もしくは C:\\Users\\{username}\\AppData\\Local）
dev
flutter
Flutter SDKの配置をしたあとはパスを通します。パスを通すことでflutterコマンドがどの階層でも有効になります。
Mac（zshrcをzshenvで置き換えてもOK）
echo 'export PATH="$PATH:/Users/ここはホームディレクトリを指定/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc
Windowsは環境変数設定画面から設定を行います。
パスが通ったらバージョンを出してみましょう。バージョンが表示されればパスの設定は完了です。
flutter --version
ここまででFlutter SDKの準備はできました！やったー！次はiOSとAndroidの開発ができるように準備します。
iOS開発のツールのインストール
公式の手順はコチラ
まずはXcodeのインストールをします。XcodeのダウンロードはApp Storeからできます。
Xcodeのインストール後はいくつかのコマンドを実行します。これはコマンドラインツールでインストールしたXcodeを利用するとための設定とライセンスに同意するためのコマンドです。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
XcodeのインストールができたらiOSシミュレータのインストールをします。次のコマンドを実行して完了です。
xcodebuild -downloadPlatform iOS
シミュレータの起動は次のコマンドでできます。現時点では起動の必要はありません。
open -a Simulator
最後にCocoapodsをインストールします。CocoapodsはiOSアプリ開発で利用されるパッケージ管理ツールです。次のコマンドでインストールできます。
sudo gem install cocoapods
これでiOSの開発ができるようになりました！やったー！私はCocoaPodsのインストールでエラーになって苦戦しました。
Android開発のツールのインストール
公式の手順はコチラ
まずはAndroid Studioをインストールします。こちらの公式からダウンロードしウィザードに沿ってインストールをします。
続いてAndroid toolchainをインストールします。Android Toolchainとは、Androidアプリケーションを開発・ビルド・デプロイするために必要なツールの集合です。インストールはAndroid Studio上の操作で行います。細かい手順は以下の記事でまとまっていました。勉強させていただきました。
最後にAndroidのライセンス同意のコマンドを実行します。
flutter doctor --android-licenses
これでAndroidの開発ができるようになりました！やったー！
Flutter Doctorでチェック
Flutter DoctorはFlutterの開発環境の状態を出力するコマンドです。各種セットアップが問題なければ各項目にチェックマークが付きます。
セットアップの不備がある場合はバツマークやメッセージが表示されますので、メッセージに従いセットアップを行います。
flutter doctor
fvmでバージョンの切り替え
fvmというFlutterのバージョン管理ツールがあります。プロジェクトによってFlutterのバージョンを切り替えたい場合に便利なツールです。わざわざ目的のFlutter SDKを入れ直すという作業が必要なくなります。
公式サイトはコチラ
インストール方法
まずはHomebrewをインストールします。そして次のコマンドを実行します。fvmのGitHubリポジトリをHomebrewに追加しインストールを実行しています。
brew tap leoafarias/fvm
brew install fvm
fvmでFlutter SDKを準備
useコマンドで利用したいFlutterのバージョンを指定すると、その階層に.fvmフォルダが作成されます。ここに指定したバージョンのFlutter SDKへのシンボリックリンク（参照）が配置されます。これを通してあたかもそのバージョンがプロジェクトのフォルダ内に存在するかのように利用できます。
fvm use バージョン番号
利用可能なバージョン一覧はreleasesコマンドで確認することができます。
fvm releases
fvmコマンドを利用してFlutterのバージョンを確認することができます。
fvm flutter --version
エディタでfvmのFlutter SDKのパスを指定する
fvmでFlutterを導入した場合、エディタが参照するSDKのパスを指定します。
VSCodeの場合は、「command(Ctrl) + shift + P」を入力しコマンドパレットを呼び出し、「settings.json」と入力します。
「Preferences:Open Settings (JSON)」はユーザーごとの設定、「Preferences:Open Workspace Settings (JSON)」はワークスペースごとの設定ファイルです。ワークスペースごとの方はアプリごとほぼ同義です。
いずれかのjsonに以下を追加します。
{
"dart.flutterSdkPath": ".fvm/flutter_sdk"
}
AndroidStudioの場合は、プロジェクトを作成する際に「Flutter SDK path」を指定する欄に「プロジェクトフォルダ名/.fvm/flutter_sdk」を指定します。
こちらの記事にfvmの導入についてまとまっておりました。勉強させていただきました。
おわりに
やっとセットアップが終わりました。さすがはクロスプラットフォーム開発ですね、、、入れるものがいろいろあって大変でした。
沢山のものをインストールする中で、何に使うのか、なぜ必要なのかが分からないとセットアップに不備があった際に自分で手直しできないことがあります。特にFlutterではこれがよくあるのかなと思いました。私もセットアップ作業中に「これはなんだ」と思う作業がありましたので、できるだけ今回の記事では、その作業が何者かを書くようにしました。
どなたかのご参考になれば幸いです。
Discussion