Zenn
🪵

Flutterを試すためのビルド環境構築（Mac編）

2023/08/28に公開
1件
Flutter
macOS
#
環境構築
#
doctor
tech

はじめに

軽い気持ちで「Flutterってどんなもんだろう？」と思いセットアップを始めたものの、 延々とソフトウェアのインストールをさせられた 経験をお持ちの方は多いのではないでしょうか？
インストールしながらバージョン依存関係に躓き、「後でバージョン管理も考えないと…」など思った方も多いのではないでしょうか？

Flutterとは？

https://docs.flutter.dev/get-started/install

Flutterはモバイルアプリケーション用のマルチプラットフォームフレームワークとして、主にiOS/Androidの開発に利用されています。Webアプリケーションに対してネイティブアプリケーションともよばれるこれら2つのOSへのアプリ提供を横断で行えるのは本フレームワークの最たる魅力かと思います。

ただし、ビルド環境は別途構築する必要があります…、というのが今回の話。

Flutterインストール → ビルド環境の確認

Flutterのインストールはzipをダウンロードしてきてパスを通すだけです。
（コアがAppleシリコンの場合、もう少し前段が必要ですが…）

以下、公式ページより。

cd ~/development
unzip ~/Downloads/flutter_macos_3.13.1-stable.zip # 別途ローカルにダウンロードした後の想定

export PATH="$PATH:`pwd`/flutter/bin"

ただし、Flutter本体はフレームワークなので、別途ビルド環境を構築する必要があります。
それを検証するために、以下のコマンドが用意されています。

flutter doctor

パスを通すと以下のコマンドが実行できます。

% flutter doctor

以下はビルド環境が整った際のメッセージで、こちらを表示するのが今回のゴールとなります。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.1, on macOS 13.5.1 22G90 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.74.0)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

ビルド環境の整備

iOS/Androidそれぞれをビルドできる環境を作っていきます。
これらの開発経験があれば、ある程度は整備されているはずなのですが、今回はFlutterからの入門を想定して構築手順を書きました。

Android Studio

https://developer.android.com/studio

上記ページからダウンロードができます。Android Studioは IDE（統合開発環境） ですが、その中でSDKやエミュレータの管理も行えるので、一揃い入れておいて損はないと思います。

Setting画面からライブラリを追加

Android Studioを起動して、ツールバーからSettingを選択すると、ライブラリの管理画面を表示できます。

以下の通り必要なものを追加できる造りになっています。追加時には規約同意も必要なので、Apply実行後に適宜チェックしていきましょう。

FlutterはSDK Managerとシミュレータを要求してくるので、SDK Toolsからは Command-line Tools を取り込んでおくと良いかと思います。SDK Managerが組み込まれていれば、それ以外はFlutterが取り込んでくれます。

android-licenses

「Android license status unknown.」とエラーが出ることがあります。こちらは取り込まれたライブラリについて、規約同意が必要なケースで起こります。

以下のコマンドを実行すると、規約同意が必要なものをすべてチェックすることができます。

$ flutter doctor --android-licenses
  :
Accept? (y/N): y # 同意するとエラーが解消します。

Xcode

言わずとしれたApple向けソフトウェア開発環境になります。こちらはAppStoreからインストールするだけでも良いのですが、バージョン管理をおこない使い分けるケースが出てくるので、xcodesを利用するのがおすすめです。

バージョン管理ツール「xcodes」

https://github.com/XcodesOrg/xcodes

上記ツールからのXcodeダウンロード元は以下のページで、過去バージョンがすべて管理されています。
（Appleの開発者向けページのため、デベロッパーアカウントが必要です）
https://developer.apple.com/download/all/

% brew install xcodesorg/made/xcodes
% xcodes version
1.4.1 # インストール成功
% xcodes install 14.3.1
# Apple開発者向けページからダウンロードするため、アカウント・パスワード・多要素認証キーを要求されます。
% xcodes select 14.3.1 # CommandLineToolのパスを切り替える

Cocoapodsも必要

Cocoapodsは iOS開発におけるパッケージ管理 を担っています。
gemでインストールするのが一般的なので、Mac標準のruby/gemを更新した上で追加しましょう。

$ brew install rbenv # rubyのバージョン管理ツールを導入
% rbenv --version
rbenv 1.2.0
% rbenv install 3.2.1
% rbenv global 3.2.1 # グローバルで新しいrubyを導入
% ruby -v
ruby 3.2.1 (2023-02-08 revision 31819e82c8) [x86_64-darwin22]
% gem -v # gemも合わせて更新される
3.4.6

$ sudo gem install cocoapods
$ pod setup
Setup completed # これが出たらpod導入成功

その他

Chrome/VSCodeが必要となっています。
わたしはこちらが入っている状態だったので特に警告を受けませんでしたが、ごく普通にインストールすれば問題ないかと思います。これらはビルドに影響しないので、常に最新バージョンを利用すればよいでしょう。

https://www.google.com/intl/ja/chrome/gsem/download/
https://code.visualstudio.com/download

VSCodeにはFlutter向け拡張機能があるので、こちらは追加しましょう。

全部入りましたか？

  • Android Studio
    • SDK Manager (Command Line Tool)
  • xcodes
    • Xcode
  • rbenv
    • Cococapods
  • Chrome
  • VSCode

Xcodeが最もダウンロードボリュームがあります。
戦略的にはダウンロードを最初にすすめるのが良いかと思います。

シミュレータを起動してみよう

わたしは遭遇しなかったのですが、「Connected device」で引っかかるケースがあるようです。
シミュレータの起動を一度試しておくと良いかもしれません。
https://qiita.com/ys_works/items/f9ed7a5516f97a467915

以下、Android StudioでPixelを、XcodeでiPhone14をそれぞれ起動した際のキャプチャです。

最後に

さて、わたしはダウンロードを待っているだけで半日終わってしまいました…
Flutterの学習をスケジューリングする際には、是非とも環境整備の時間にバッファーを取って、余裕を持たせてみてください（笑）

Discussion

ttaniguchittaniguchi

チュートリアルも開始できました。
新規プロジェクトを作成すると、デフォルトでカウンターアプリが立ち上がります。

iOS/Android/MacOSでビルドしてみました。

VSCodeの「実行とデバッグ」を用いて動かしています。
ログ等もこちらから確認できます。