Flutter ハンズオン｜開発環境構築

Dev

2023/01/29 23:132023/01/29 23:13

「Flutter」というマルチプラットフォーム開発で採用されることの多くなった印象のフレームワークを使ってみた。

導入にあたり環境構築で躓くポイントがあったため、忘備録として解消方法等を記載する。

環境

MacBook Pro (15-inch, 2018)
macOS Ventura 13.0.1

環境構築

SDKインストール

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

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

リファレンス通りにダウンロードしたSDKをローカル配置してパスを通してやれば良い。

$ flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (4 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

インストールの必要がある依存関係を確認

flutter doctorコマンドで各種依存ツールやライブラリの状態を確認することができる。

$ flutter doctor

Running "flutter pub get" in flutter_tools...                       9.6s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1 22A400 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
   ✗ cmdline-tools component is missing
     Run `path/to/sdkmanager --install "cmdline-tools;latest"`
     See https://developer.android.com/studio/command-line for more details.
   ✗ Android license status unknown.
     Run `flutter doctor --android-licenses` to accept the SDK licenses.
     See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.4)
[✓] VS Code (version 1.74.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 3 categories.

私の環境では、Android SDKとXcode周りで各種ツールのインストール状態や認証が不完全であるとのこと。

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
   ✗ cmdline-tools component is missing
     Run `path/to/sdkmanager --install "cmdline-tools;latest"`
     See https://developer.android.com/studio/command-line for more details.
   ✗ Android license status unknown.
     Run `flutter doctor --android-licenses` to accept the SDK licenses.
     See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.

Android toolchain関連のissue解消

最新のコマンドラインツールが見つからないとのことなので、最新のコマンドラインツールを導入する。

Android StudioのPreferencesから、[Appearance & Behavior > System Settings > Android SDK > SDK Tools]と選択し、Android SDK Command-line Tools(latest)にチェックを入れてOKでインストールを行う。

コマンドラインツールのインストールが完了したら、Android SDKの各種ライセンスの確認と承認をする必要があるため、flutter doctor --android-licensesのコマンドを実行する。

 $ flutter doctor --android-licenses
[=======================================] 100% Computing updates...             
6 of 7 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y

再度、flutter doctorを実行してissueが解消されていることを確認する。

Xcode関連のissue対応

Xcode自体は事前にインストール済みであったが、パッケージのインストールやライセンスの承認ができていないとのこと。

そのため、次のコマンドを順番に実行する。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license

また、CocoaPodsというiOSアプリの依存管理システムライブラリが必要なためインストールする。

$ sudo gem install cocoapods

再度、flutter doctorを実行してissueが解消されていることを確認する。

導入確認

全てのissueの解消ができていれば、No issues found!と表示される。

$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1 22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.4)
[✓] VS Code (version 1.74.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

さいごに

Flutterの環境構築は、マルチプラットフォームに対応してるが故に若干複雑という印象を受けた。

ただし、実際には開発対象のプラットフォーム次第だと思うので、無理に全てのissueを解消する必要は無さそう。

環境構築も無事に終えたので、次回は、サンプルアプリケーションなどを眺めつつ実機やエミュレータで動かしてみようと思う。