snovaのブログ

プログラミングとか、日常のこととか、アウトプットしたほうがよいと聞いたので

Flutterの開発環境をmacに導入



【スポンサーリンク】



イントロダクション

アプリやwebサービスを作るためには多くの方法があります。なかでも、Flutterは最近非常に盛り上がりを見せています。私自身、モバイルアプリ開発やwebアプリにはほとんど携わったことがないのですが、この機に勉強を兼ねてFlutterで遊んでみました。

目次

なぜFlutter?

Googleが開発しているのでAndroidはもちろん、iOS、webアプリを同時に作ることができます。 そして、マテリアルデザインにも対応しています。 Flutterで使われているDart言語はJavaに近いので、Javaを知っている人には覚えやすいかもしれません。

環境

公式によると、必要な要件は以下の通りです。

  • OS : macOS (64-bit)
  • ディスク容量 : 700MB
  • ツール(git以外はデフォルトで入っているはず) : bash, curl, git 2.x, mkdir, rm, unzip, which

インストール

公式サイトにしたがって、導入していきます。

Flutter SDKのダウンロード

  1. 公式サイトからzipファイルをダウンロード
  2. 適当な場所で解凍し、置きたい場所に移動
  3. PATHを通す(ex. $ export PATH="$PATH:/Applications/flutter/bin")
  4. (オプション)開発バイナリをプレダウンロードしたいときは$ flutter precashe
  5. $ flutter doctorでPCの環境をチェック(ログは以下参照)

flutter doctorで未インストールのツールを表示した結果。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[✗] iOS toolchain - develop for iOS devices
    ✗ 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
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] VS Code (version 1.34.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

セットアップ

flutter doctorの結果を受けて、必要なツールのインストールをします。

iOSセットアップ

  1. App StoreからXcodeのインストール
  2. $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developerをターミナルで実行
  3. $ sudo xcodebuild -licenseagreeでライセンス
  4. $ open -a Simulatorでシミュレータを起動
  5. Hardware > DeviceでiPhone 5S以上の端末になっているか確認、画面のサイズを変更するときはWindow > Scale
  6. 初期化されたアプリを生成するため、以下のコマンド6でflutter起動
flutter create my_app
cd my_app
flutter run

もしiOSバイスでテストするなら以下の手順を踏みます。

  1. 準備をするため、以下のコマンドを実行
  2. $ open ios/Runner.xcworkspaceRunnerタブ → signingteamで自分のApple IDを認証
  3. Runnerタブ → Bundle Indentifierでオリジナルなものに変更(com.[my team name].testApp等、ここで少し詰まった)
  4. iOSバイスmacと接続(初めて接続するときは信頼をタップ)
  5. 設定一般デバイス管理[自分のアカウント名]このアカウトを信頼
  6. flutter runiOSバイス上で起動

1でインストールするツールは以下。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

3がうまくできていないときは以下のようなエラーメッセージが出ます。Teamの設定を確認し、Bundle Identifierは適当なものに変えてください。

...

Could not build the precompiled application for the device.

It appears that your application still contains the default signing identifier.
Try replacing 'com.example' with your signing id in Xcode:
  open ios/Runner.xcworkspace

Error launching application on your iPad Pro.

すべてインストールが終了し、もう一度$ flutter doctorをして、以下の結果が出ればOK。

[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)

Androidセットアップ

  1. Android Studioをインストール
  2. $ flutter doctor --android-licensesでライセンスを確認
  3. Android Studioを起動して、configurepluginでflutterと検索、インストール
  4. (実機で動かすとき)AndroidバイスをUSBでmacと接続して、設定開発者向けオプション開発者向けオプションUSBデバックを有効にする
  5. (エミュレータを使うとき)Android Studioを起動し、configureAVD managerCreate Virtual Deviceで画面の指示に従いエミュレータを作成、起動

2でライセンスを確認しないと、$ flutter doctorで以下のようなエラーが出ます。

 [!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

3でプラグインを導入しないと、$ flutter doctorで以下のようなエラーが出ます。

[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

VScodeプラグイン

$ flutter doctorを起動すると、以下のようなエラーメッセージが出ます。これはVScodeプラグインが入っていないためですので、VScodeflutterと検索、インストールします。

[!] VS Code (version 1.34.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

実行

上記すべて完了したら、$ flutter doctorで状態を確認します。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.34.0)
[!] Connected device
    ! No devices available

試しにiPadを繋いで$ flutter runしてみたら、問題なくテストアプリ(ボタンを押してカウントするアプリ)を起動できました。

まとめ

macOSにFlutterの開発環境を導入しました。導入は基本的にflutter doctorの指示に従えば問題なくできるはずです。今後は簡単なアプリを作って練習していきたいと思います。

参考サイト

www.snova301.work