| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「FlutterFire」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の60版が非表示)
1行目: 1行目:
−
| [[Flutter]] |  
+
| [[Dart]] | [[Flutter]] | [https://www.typea.info/blog/index.php/category/flutter/ ブログカテゴリ(Flutter)] | [[Android Studio]] | [[Flutter macos]] | [[Flutter 手順]] | [[Flutter Riverpod]] |
 
==FlutterFire==
 
==FlutterFire==
 
*https://firebase.flutter.dev/
 
*https://firebase.flutter.dev/
−
===Overview===
+
 
 +
*[https://firebase.flutter.dev/ 対応状況]
 +
*[https://firebase.flutter.dev/docs/overview/ はじめに]
 +
 
 +
=== Firebase CLI===
 
----
 
----
−
*https://firebase.flutter.dev/docs/overview
+
*https://firebase.google.com/docs/cli?hl=ja#install-cli-mac-linux
−
====Install====
+
<pre>
 +
$ npm install -g firebase-tools
 +
</pre>
 +
 
 +
===Install===
 
----
 
----
 
*[https://firebase.flutter.dev/docs/migration/ Migration]
 
*[https://firebase.flutter.dev/docs/migration/ Migration]
23行目: 31行目:
 
$ flutter pub get
 
$ flutter pub get
 
</pre>
 
</pre>
−
====Platform====
+
===Platform セットアップ===
 +
----
 +
====[https://firebase.flutter.dev/docs/installation/web Web]====
 +
----
 +
 
 +
====[https://firebase.flutter.dev/docs/installation/android Android]====
 +
----
 +
=====build.gradle=====
 +
-----
 +
*android/build.gradle
 +
<pre>
 +
buildscript {
 +
  dependencies {
 +
    // ... other dependencies
 +
    classpath 'com.google.gms:google-services:4.3.8'
 +
  }
 +
}
 +
</pre>
 +
*android/app/build.gradle
 +
<pre>
 +
apply plugin: 'com.google.gms.google-services'
 +
</pre>
 +
=====署名=====
 +
----
 +
*https://developers.google.com/android/guides/client-auth
 +
*Java に付属の keytool ユーティリティを実行して、証明書の SHA-1 フィンガープリントを取得します。
 +
*リリース証明書のフィンガープリントとデバッグ証明書のフィンガープリントの両方を取得する必要があります。
 +
 
 +
**リリース証明書のフィンガープリントを取得
 +
<pre>
 +
keytool -list -v -alias <your-key-name> -keystore <path-to-production-keystore>
 +
</pre>
 +
**デバッグ証明書のフィンガープリントを取得
 +
**デフォルトパスワードは android
 +
<pre>
 +
keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
 +
</pre>
 +
 
 +
====="google-services.json" file to the project?=====
 
----
 
----
−
=====[https://firebase.flutter.dev/docs/installation/android Android]=====
+
*https://firebase.google.com/docs/android/setup?hl=ja
−
=====[https://firebase.flutter.dev/docs/installation/ios iOS]=====
+
*Firebase Android 構成ファイルをアプリに追加します。
−
=====[https://firebase.flutter.dev/docs/installation/macos macOS]=====
+
*google-services.json のダウンロード ボタン をクリックして、Firebase Android 構成ファイル（google-services.json）を取得します。
 +
*構成ファイルをアプリのモジュール（アプリレベル）ディレクトリに移動します。
 +
 
 +
====[https://firebase.flutter.dev/docs/installation/ios iOS]====
 +
----
 +
https://firebase.google.com/docs/ios/setup
 +
=====GoogleService-Info.plist 追加=====
 +
----
 +
# FirebaseでiOSアプリを登録
 +
# FirebaseアプリのGoogleService-Info.plistファイルをダウンロード
 +
# ios/Runner.xcworkspace をxcodeで開く
 +
# Xcode内の左側のプロジェクト・ナビゲーションから「Runner」を右クリックし「Add files」を選択
 +
# "Copy items if needed" を有効にして、GoogleService-Info.plistファイルを取り込む
 +
 
 +
[[File:ios_flutter_fire.png|500px]]
 +
 
 +
=====[https://qiita.com/mkurom/items/c2282d95aa737e73a769 fatal error: module 'firebase_core' not found エラー]=====
 +
----
 +
<pre>
 +
Error output from Xcode build:
 +
↳
 +
    ** BUILD FAILED **
 +
 
 +
 
 +
Xcode's output:
 +
↳
 +
    /Users/hirotoyagi/Workspaces/flutter/tenarai_online/ios/Runner/GeneratedPluginRegistrant.m:10:9: fatal error: module 'firebase_core'
 +
    not found
 +
    @import firebase_core;
 +
</pre>
 +
*
 +
<pre>
 +
$ flutter clean
 +
$ cd ios
 +
$ rm -rf Pods
 +
$ rm Podfile.lock Podfile
 +
$ flutter run
 +
</pre>
 +
*Podfile
 +
<pre>
 +
# Uncomment this line to define a global platform for your project
 +
platform :ios, '10.0'
 +
</pre>
 +
 
 +
====[https://firebase.flutter.dev/docs/installation/macos macOS]====
 
----
 
----
−
* GoogleService-Info.plist のダウンロード
 
 
* [[XCode]]で、open ./macos/Runner.xcworkspace/
 
* [[XCode]]で、open ./macos/Runner.xcworkspace/
 +
[[File:flutterfire_google_plist_macos.png|400px]]
 +
* GoogleService-Info.plist
 +
**ダウンロード
 +
**Runner右クリックからファイルを追加
 +
**以下の画面のチェックをONにして追加
  
−
=====[https://firebase.flutter.dev/docs/installation/web Web]=====
+
Firebase Emulator Suiteの一部を使用して、開発中のローカルマシンでfirebaseサービスをエミュレートしたい場合は、macOSアプリが安全でない接続でローカルネットワークサービスに接続することを許可する必要があります。安全でない接続を許可するには、アプリケーションのplistファイル内に以下を追加
 +
<pre>
 +
<key>NSAppTransportSecurity</key>
 +
<dict>
 +
    <key>NSAllowsLocalNetworking</key>
 +
    <true/>
 +
</dict>
 +
</pre>
  
−
====初期化====
+
* 以下のエラーの場合
 +
<pre>
 +
[!] The FlutterFire plugin firebase_core for macOS requires a macOS deployment target of 10.12 or later.
 +
</pre>
 +
**macos/Podfileの修正
 +
<pre>
 +
platform :osx, '10.12'
 +
</pre>
 +
 
 +
====Windows====
 +
----
 +
*C++によるデスクトップ開発のインストール
 +
[[File:flutter_win.png|500px]]
 +
 
 +
====[https://firebase.flutter.dev/docs/installation/web Web]====
 +
----
 +
*[https://flutter.dev/web Web Support for  Flutter]
 +
=====Debug=====
 +
[https://www.typea.info/blog/index.php/2021/08/04/mac_edge_flutter_debug/ MacのEdgeでFlutterのデバッグをする]
 +
 
 +
===初期化===
 
----
 
----
 
*Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります
 
*Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります
 
*初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。
 
*初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。
 
*FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します
 
*FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します
 +
 +
==[https://firebase.flutter.dev/docs/auth/overview/ Authentication]==
 +
===Instration===
 +
====Stableチャネルに切り替え====
 +
<pre>
 +
$ flutter channel stable
 +
Switching to flutter channel 'stable'...
 +
git: From https://github.com/flutter/flutter
 +
git:  + 2b9537c783...cc00e7e6bc dev                    -> origin/dev  (forced update)
 +
git:  * [new branch]            dnfield-patch-1        -> origin/dnfield-patch-1
 +
git:  * [new branch]            flutter-2.4-candidate.1 -> origin/flutter-2.4-candidate.1
 +
git:  * [new branch]            flutter-2.4-candidate.2 -> origin/flutter-2.4-candidate.2
 +
git:  * [new branch]            flutter-2.4-candidate.3 -> origin/flutter-2.4-candidate.3
 +
git:  * [new branch]            flutter-2.4-candidate.4 -> origin/flutter-2.4-candidate.4
 +
git:  * [new branch]            flutter-2.4-candidate.5 -> origin/flutter-2.4-candidate.5
 +
git:    52e2ca38fc..2108fbd78d  master                  -> origin/master
 +
git:  + c8311f68be...f4d2c79a6a revert-85466-revert-85221-0624new -> origin/revert-85466-revert-85221-0624new  (forced update)
 +
git:  * [new branch]            revert-86171-revert-83924-textTheme -> origin/revert-86171-revert-83924-textTheme
 +
git:  * [new branch]            revert-86198-deprecate_appbar_backwards_compatibility_flag -> origin/revert-86198-deprecate_appbar_backwards_compatibility_flag
 +
git:  * [new branch]            test                    -> origin/test
 +
git:  * [new branch]            test2                  -> origin/test2
 +
git:  * [new tag]              2.4.0-0.0.pre          -> 2.4.0-0.0.pre
 +
git:  * [new tag]              2.4.0-4.0.pre          -> 2.4.0-4.0.pre
 +
git: Already on 'stable'
 +
git: Your branch is up to date with 'origin/stable'.
 +
Successfully switched to flutter channel 'stable'.
 +
To ensure that you're on the latest build from this channel, run 'flutter upgrade'
 +
</pre>
 +
*確認
 +
<pre>
 +
$ flutter channel
 +
Flutter channels:
 +
  master
 +
  dev
 +
  beta
 +
* stable
 +
</pre>
 +
 +
====pubspec.yaml====
 +
*firebase_authを追記
 +
<pre>
 +
dependencies:
 +
  flutter:
 +
    sdk: flutter
 +
  firebase_core: "^1.4.0"
 +
  firebase_auth: "^3.0.1"
 +
</pre>
 +
*更新
 +
<pre>
 +
$ flutter pub get
 +
</pre>
 +
 +
====Web====
 +
----
 +
*追記
 +
<pre>
 +
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
 +
</pre>
 +
 +
====iOS/macOS====
 +
----
 +
*cd ios/macos
 +
 +
*macos 例
 +
<pre>
 +
$ flutter clean
 +
$ rm -rf Pods
 +
$ rm Podfile
 +
$ rm Podfile.lock
 +
$ pod repo update
 +
$ flutter run -d macos
 +
</pre>
 +
*Podfile
 +
<pre>
 +
platform :osx, '10.12'
 +
</pre>
 +
 +
===[https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja 認証の永続性]===
 +
----
 +
*[https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja 認証の永続性]
 +
===Google===
 +
*[https://console.firebase.google.com/project/_/authentication/providers Firebase コンソール] で Googleサインインプロバイダーを有効化
 +
*[https://pub.dev/packages/google_sign_in google_sign_in]
 +
====iOS====
 +
*ios/Runner/info.plist
 +
<pre>
 +
<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
 +
<!-- Google Sign-in Section -->
 +
<key>CFBundleURLTypes</key>
 +
<array>
 +
<dict>
 +
<key>CFBundleTypeRole</key>
 +
<string>Editor</string>
 +
<key>CFBundleURLSchemes</key>
 +
<array>
 +
<!-- TODO Replace this value: -->
 +
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
 +
<string>com.googleusercontent.apps.{GoogleService-Info.plist から、この部分を取得する}</string>
 +
</array>
 +
</dict>
 +
</array>
 +
<!-- End of the Google Sign-in Section -->
 +
</pre>

2021年10月17日 (日) 05:33時点における最新版

| Dart | Flutter | ブログカテゴリ(Flutter) | Android Studio | Flutter macos | Flutter 手順 | Flutter Riverpod |

FlutterFire

Firebase CLI

$ npm install -g firebase-tools

Install

  • Migration
  • Firebase のサービスを利用する前に、まず firebase_core プラグインをインストールする必要があります。
  • このプラグインは、アプリケーションを Firebase に接続する役割を果たします。
  • このプラグインをpubspec.yamlファイルに追加します。

pubspec.yaml 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: "^1.3.0"

$ flutter pub get

Platform セットアップ

Web

Android

build.gradle
  • android/build.gradle
buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.8'
  }
}
  • android/app/build.gradle
apply plugin: 'com.google.gms.google-services'
署名
  • https://developers.google.com/android/guides/client-auth
  • Java に付属の keytool ユーティリティを実行して、証明書の SHA-1 フィンガープリントを取得します。
  • リリース証明書のフィンガープリントとデバッグ証明書のフィンガープリントの両方を取得する必要があります。
    • リリース証明書のフィンガープリントを取得
keytool -list -v -alias <your-key-name> -keystore <path-to-production-keystore>
    • デバッグ証明書のフィンガープリントを取得
    • デフォルトパスワードは android
keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
"google-services.json" file to the project?
  • https://firebase.google.com/docs/android/setup?hl=ja
  • Firebase Android 構成ファイルをアプリに追加します。
  • google-services.json のダウンロード ボタン をクリックして、Firebase Android 構成ファイル（google-services.json）を取得します。
  • 構成ファイルをアプリのモジュール（アプリレベル）ディレクトリに移動します。

iOS

https://firebase.google.com/docs/ios/setup

GoogleService-Info.plist 追加
  1. FirebaseでiOSアプリを登録
  2. FirebaseアプリのGoogleService-Info.plistファイルをダウンロード
  3. ios/Runner.xcworkspace をxcodeで開く
  4. Xcode内の左側のプロジェクト・ナビゲーションから「Runner」を右クリックし「Add files」を選択
  5. "Copy items if needed" を有効にして、GoogleService-Info.plistファイルを取り込む

Ios flutter fire.png

fatal error: module 'firebase_core' not found エラー
Error output from Xcode build:
↳
    ** BUILD FAILED **


Xcode's output:
↳
    /Users/hirotoyagi/Workspaces/flutter/tenarai_online/ios/Runner/GeneratedPluginRegistrant.m:10:9: fatal error: module 'firebase_core'
    not found
    @import firebase_core;

$ flutter clean
$ cd ios
$ rm -rf Pods
$ rm Podfile.lock Podfile
$ flutter run
  • Podfile
# Uncomment this line to define a global platform for your project
platform :ios, '10.0'

macOS

  • XCodeで、open ./macos/Runner.xcworkspace/

Flutterfire google plist macos.png

  • GoogleService-Info.plist
    • ダウンロード
    • Runner右クリックからファイルを追加
    • 以下の画面のチェックをONにして追加

Firebase Emulator Suiteの一部を使用して、開発中のローカルマシンでfirebaseサービスをエミュレートしたい場合は、macOSアプリが安全でない接続でローカルネットワークサービスに接続することを許可する必要があります。安全でない接続を許可するには、アプリケーションのplistファイル内に以下を追加 

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>
  • 以下のエラーの場合
[!] The FlutterFire plugin firebase_core for macOS requires a macOS deployment target of 10.12 or later.
    • macos/Podfileの修正
platform :osx, '10.12'

Windows

  • C++によるデスクトップ開発のインストール

Flutter win.png

Web

Debug

MacのEdgeでFlutterのデバッグをする

初期化

  • Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります
  • 初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。
  • FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します

Authentication

Instration

Stableチャネルに切り替え

$ flutter channel stable
Switching to flutter channel 'stable'...
git: From https://github.com/flutter/flutter
git:  + 2b9537c783...cc00e7e6bc dev                     -> origin/dev  (forced update)
git:  * [new branch]            dnfield-patch-1         -> origin/dnfield-patch-1
git:  * [new branch]            flutter-2.4-candidate.1 -> origin/flutter-2.4-candidate.1
git:  * [new branch]            flutter-2.4-candidate.2 -> origin/flutter-2.4-candidate.2
git:  * [new branch]            flutter-2.4-candidate.3 -> origin/flutter-2.4-candidate.3
git:  * [new branch]            flutter-2.4-candidate.4 -> origin/flutter-2.4-candidate.4
git:  * [new branch]            flutter-2.4-candidate.5 -> origin/flutter-2.4-candidate.5
git:    52e2ca38fc..2108fbd78d  master                  -> origin/master
git:  + c8311f68be...f4d2c79a6a revert-85466-revert-85221-0624new -> origin/revert-85466-revert-85221-0624new  (forced update)
git:  * [new branch]            revert-86171-revert-83924-textTheme -> origin/revert-86171-revert-83924-textTheme
git:  * [new branch]            revert-86198-deprecate_appbar_backwards_compatibility_flag -> origin/revert-86198-deprecate_appbar_backwards_compatibility_flag
git:  * [new branch]            test                    -> origin/test
git:  * [new branch]            test2                   -> origin/test2
git:  * [new tag]               2.4.0-0.0.pre           -> 2.4.0-0.0.pre
git:  * [new tag]               2.4.0-4.0.pre           -> 2.4.0-4.0.pre
git: Already on 'stable'
git: Your branch is up to date with 'origin/stable'.
Successfully switched to flutter channel 'stable'.
To ensure that you're on the latest build from this channel, run 'flutter upgrade'
  • 確認
$ flutter channel
Flutter channels:
  master
  dev
  beta
* stable

pubspec.yaml

  • firebase_authを追記
dependencies:
  flutter:
    sdk: flutter
  firebase_core: "^1.4.0"
  firebase_auth: "^3.0.1"
  • 更新
$ flutter pub get

Web

  • 追記
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>

iOS/macOS

  • cd ios/macos
  • macos 例
$ flutter clean
$ rm -rf Pods
$ rm Podfile 
$ rm Podfile.lock 
$ pod repo update
$ flutter run -d macos
  • Podfile
platform :osx, '10.12'

認証の永続性

Google

iOS

  • ios/Runner/info.plist
<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- TODO Replace this value: -->
			<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
			<string>com.googleusercontent.apps.{GoogleService-Info.plist から、この部分を取得する}</string>
		</array>
	</dict>
</array>
<!-- End of the Google Sign-in Section -->
「https://www.typea.info/tips_/index.php?title=FlutterFire&oldid=33833」から取得

© 2006 矢木浩人