前提

Macを利用
Xcodeがインストール済
Android Studioがインストール済

Flutter コマンドをインストール

公式サイトからSDKをダウンロード。

公式のやり方に合わせてdevelopmentディレクトリを作成して、SDKを解凍する。
これは任意のディレクトリでもOK。

$ mkdir  ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.10.1-stable.zip

SDKにパスを通して、.bash_profileにも登録する。
登録後、echo $PATHでパスが登録されていることを確認。登録されていないとターミナルを開き直すと使えなくなる。

$ echo export PATH="$PATH:`pwd`/flutter/bin" >> .bash_profile
$ source ~/.bash_profile
$ flutter --version
Flutter 2.10.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision db747aa133 (7 days ago) • 2022-02-09 13:57:35 -0600
Engine • revision ab46186b24
Tools • Dart 2.16.1 • DevTools 2.9.2

必要な環境設定ができているかをチェック

flutter doctorコマンドで環境設定をチェックします。

$ flutter doctor
Running "flutter pub get" in flutter_tools...                       8.9s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.1, on macOS 12.2.1 21D62 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ 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 13.2.1)
    ✗ 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.1)
[✓] VS Code (version 1.60.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

上記のようなエラーがいくつか出ることがあるので、潰していきます。

◎ cmdline-tools component is missing

Preferences > Appearance & Behavior > System Settings > Android SDK からAndroid SDK Command-line Toolsを追加します。

◎ Android license status unknown.

$ flutter doctor --android-licenses

◎ CocoaPods not installed.

$ brew install cocoapods

Android StudioでFlutterプロジェクトを作成する

プロジェクトを作成したら、main.dartが選択されているのを確認し、シュミレーターのデバイスを選択します。
その後、▶ボタンを押すと、アプリケーションがビルドされます。

しばらく待つと、シュミレーターでアプリケーションが立ち上がります。

Firebaseを利用する

こちらの公式サイトを参考にします。

Firebase プロジェクトを作成する

Firebaseのコンソールから Firebase プロジェクトを作成します。

iOSアプリをFirebaseに追加

作成したプロジェクトを開き、iOSのアプリを追加します。

アプリの登録

/ios/Runner.xcworkspaceをxcodeで開き、Runnerをを開きます。
Bundle IDをコピーして、アプリ登録画面で設定します。

設定ファイルをダウンロード

画面の説明に従い、GoogleService-Info.plistをダウンロードして、/ios/Runner配下に配置します。

あとの手順は「次へ」でスキップします。

FlutterFire プラグインを追加する

/pubspec.yamlに以下の必要に応じてプラグインを追加します。詳しくはこちらを確認。

以下記載例。

dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: X.X.X 各配布サイトでバージョンを確認

  # Add the dependency for the FlutterFire plugin for Google Analytics
  firebase_analytics: X.X.X 各配布サイトでバージョンを確認

  # Add the dependencies for any other Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: X.X.X 各配布サイトでバージョンを確認
  cloud_firestore: X.X.X 各配布サイトでバージョンを確認

/pubspec.yamlに追加したライブラリを取得します。

$ flutter pub get

アプリケーションをビルドしてみる

準備ができたので、 Android studioでアプリをビルドしてみます。

私の場合以下のエラーがでましたので解消します。

Error output from CocoaPods:
↳

    [!] Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Error running pod install
Error launching application on iPhone 13.

解消方法

/ios/Podfile

# Uncomment this line to define a global platform for your project
- # platform :ios, '9.0'
+ platform :ios, '12.0' // 最小バージョンの指定らしい

なにかお手伝いできることがあればご連絡ください。

お問い合わせはこちらから

※Googleフォームが表示されます

Flutterの環境構築メモ

目次

前提