Zenn
🔥

Flutter+Firebase開発のための環境構築をしました

に公開
Firebase
Flutter
macOS
環境構築
tech

環境構築

実行環境

  • macOS Sonoma バージョン14.3
  • zsh
terminal
echo $SHELL
output
/bin/zsh
  • nvm
terminal
nvm --version
output
0.39.5
  • npm
terminal
npm --version
output
10.9.2
  • Node.js
terminal
node --version
output
v22.14.0

Flutter

  1. Flutter SDKのインストール
  • 「macOS」を選択
  • 「iOS」を選択
  • 「Apple Silicon」を選択
  1. zipファイルの解凍
terminal
mkdir ~/development
unzip ~/Downloads/flutter_macos_arm64_3.29.3-stable.zip -d ~/development/
  1. PATHを通す
terminal
vi ~/.zshenv
  • export PATH=$HOME/development/flutter/bin:$PATHを追記
  • :wqで保存
  • ターミナルを再起動
terminal
vi ~/.zshrc
  • export PATH="$PATH":"$HOME/.pub-cache/bin"を追記
  • :wqで保存
  • ターミナルを再起動
  1. インストールできているか確認
terminal
flutter doctor -v
terminal

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ The Google Privacy Policy describes how data is handled in this service.   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/to/crash-reporting                                     ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ║                                                                            ║
  ║ To disable animations in this tool, use                                    ║
  ║ 'flutter config --no-cli-animations'.                                      ║
  ╚════════════════════════════════════════════════════════════════════════════╝


[✓] Flutter (Channel stable, 3.29.3, on macOS 14.3 23D56 darwin-arm64, locale ja-JP) [967ms]
    • Flutter version 3.29.3 on channel stable at /Users/daiki/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (3 weeks ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✗] Android toolchain - develop for Android devices [40ms]
    ✗ 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/to/macos-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✗] Xcode - develop for iOS and macOS [149ms]
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
      Download at: https://developer.apple.com/xcode/
      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 a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      For installation instructions, see https://guides.cocoapods.org/using/getting-started.html#installation

[✓] Chrome - develop for the web [16ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed) [16ms]
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).

[✓] VS Code (version 1.98.1) [16ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available) [3.8s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 136.0.7103.48

[✓] Network resources [357ms]
    • All expected network resources are available.

! Doctor found issues in 3 categories.
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.

Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:

    flutter --disable-analytics

If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).
terminal
flutter --version
output
Flutter 3.29.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ea121f8859 (3 weeks ago) • 2025-04-11 19:10:07 +0000
Engine • revision cf56914b32
Tools • Dart 3.7.2 • DevTools 2.42.3

Firebase

参考：【Google Cloud】Flutter + Firebase環境構築（初心者向け）

Firebase CLIのインストール

terminal
npm install -g firebase-tools
terminal
firebase login
  • ブラウザが立ち上がってGoogleアカウントでのログインを要求される

FlutterFire CLIのインストール

terminal
dart pub global activate flutterfire_cli
output
The Dart CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.

Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:

    dart --disable-analytics

If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).

Downloading packages... . 
+ ansi_styles 0.3.2+1
+ args 2.7.0
+ async 2.13.0
+ boolean_selector 2.1.2
+ characters 1.4.0
+ ci 0.1.0
+ cli_util 0.4.2
+ clock 1.1.2
+ collection 1.19.1
+ dart_console 1.2.0 (4.1.1 available)
+ deep_pick 1.1.0
+ ffi 2.1.4
+ file 7.0.1
+ flutterfire_cli 1.2.0
+ http 1.3.0
+ http_parser 4.1.2
+ interact 2.2.0
+ intl 0.18.1 (0.20.2 available)
+ json_annotation 4.9.0
+ matcher 0.12.17
+ meta 1.16.0
+ path 1.9.1
+ petitparser 6.1.0
+ platform 3.1.6
+ process 5.0.3
+ pub_semver 2.2.0
+ pub_updater 0.4.0 (0.5.0 available)
+ pubspec 2.3.0
+ quiver 3.2.2
+ source_span 1.10.1
+ stack_trace 1.12.1
+ stream_channel 2.1.4
+ string_scanner 1.4.1
+ term_glyph 1.2.2
+ test_api 0.7.4
+ tint 2.0.1
+ typed_data 1.4.0
+ uri 1.0.0
+ web 1.1.1
+ win32 5.12.0
+ xml 6.5.0
+ yaml 3.1.3
Building package executables... (1.9s)
Built flutterfire_cli:flutterfire.
Installed executable flutterfire.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.zshrc, .bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/.pub-cache/bin"

Activated flutterfire_cli 1.2.0.

アプリ構築

  • 次回以降アプリ開発する時はここから始める

プロジェクトの作成

  1. Flutterプロジェクトの作成
  • flutterfire_testをローカルに作成
terminal
flutter create flutterfire_test
  1. Flutterアプリを接続するFirebaseプロジェクトを選択
terminal
cd flutterfire_test
flutterfire configure
  • プロジェクトIDの入力（一意である必要がある）
    • flutterfire-test-btforestを入力
  • プラットフォームの選択
    • webを選択（spaceキーでweb以外のチェックを外す）
output
i Found 2 Firebase projects.                                                                                  
✔ Select a Firebase project to configure your Flutter application with · flutterfile-test-btforest (flutterfile-test-btforest) 
✔ Which platforms should your configuration support (use arrow keys & space to select)? · web                 
i Firebase web app flutterfire_test (web) registered.                                                         

Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:

Platform  Firebase App Id
web       1:76943033286:web:87b52cfcc134bc572268c7

Learn more about using this file and next steps from the documentation:
 > https://firebase.google.com/docs/flutter/setup
  • 成功したらfirebase_options.dartがlib/以下に追加される

アプリでFirebaseを初期化

  1. Flutterアプリにコアプラグインをインストールする
terminal
flutter pub add firebase_core
output
Resolving dependencies... 
Downloading packages... 
  async 2.12.0 (2.13.0 available)
  fake_async 1.3.2 (1.3.3 available)
+ firebase_core 3.13.0
+ firebase_core_platform_interface 5.4.0
+ firebase_core_web 2.22.0
+ flutter_web_plugins 0.0.0 from sdk flutter
  leak_tracker 10.0.8 (11.0.1 available)
  leak_tracker_flutter_testing 3.0.9 (3.0.10 available)
  leak_tracker_testing 3.0.1 (3.0.2 available)
  lints 5.1.1 (6.0.0 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  vector_math 2.1.4 (2.1.5 available)
  vm_service 14.3.1 (15.0.0 available)
+ web 1.1.1
Changed 6 dependencies!
9 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.
  1. FlutterアプリのFirebase構成を最新化する
  • firebase.jsonを参照して自動的にやってくれる
terminal
flutterfire configure
  • yを入力
output
✔ You have an existing `firebase.json` file and possibly already configured your project for Firebase. Would you prefer to reuse the values in your existing `firebase.json` file to configure your project? · yes
  1. コアプラグインと構成ファイルをインポート
  • lib/main.dartに以下のimport文を追記
main.dart
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

  1. Firebaseを初期化する
  • lib/main.dart内のvoid main()を修正
main.dart
void main() async{
  runApp(const MyApp());
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
}

アプリの起動

terminal
flutter run

  • 右下の「＋」ボタンを押すと画面の数字が1増える

GitHub

プッシュ方法

  • ローカルにあるフォルダ（Flutterプロジェクト）をローカルリポジトリに追加して、リモートリポジトリにプッシュする
terminal
git init
git add .
git commit -m 'first commit'
branch -M main
git remote add origin https://github.com/btforest/flutterfire_test.git
git push -u origin main

GitHub Desktopで開く

  • 「Open with GitHub Desktop」でリモートリポジトリからローカルリポジトリにクローン

  • shift+command+Aでエディタを起動

  • ターミナルを起動してflutter runを打ち込めば、そのままアプリが起動できる

Discussion