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

MyMemoWiki

「FlutterFire」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の31版が非表示)
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
+
*[https://firebase.flutter.dev/docs/overview/ はじめに]
 +
 
 
=== Firebase CLI===
 
=== Firebase CLI===
 
----
 
----
30行目: 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]====
 
====[https://firebase.flutter.dev/docs/installation/android Android]====
 
----
 
----
49行目: 53行目:
 
apply plugin: 'com.google.gms.google-services'
 
apply plugin: 'com.google.gms.google-services'
 
</pre>
 
</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?=====
 
====="google-services.json" file to the project?=====
 
----
 
----
59行目: 79行目:
 
----
 
----
 
https://firebase.google.com/docs/ios/setup
 
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 エラー]=====
 
=====[https://qiita.com/mkurom/items/c2282d95aa737e73a769 fatal error: module 'firebase_core' not found エラー]=====
114行目: 143行目:
 
platform :osx, '10.12'
 
platform :osx, '10.12'
 
</pre>
 
</pre>
 +
 +
====Windows====
 +
----
 +
*C++によるデスクトップ開発のインストール
 +
[[File:flutter_win.png|500px]]
  
 
====[https://firebase.flutter.dev/docs/installation/web Web]====
 
====[https://firebase.flutter.dev/docs/installation/web Web]====
 
----
 
----
 
*[https://flutter.dev/web Web Support for  Flutter]
 
*[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のデバッグをする]
  
 
===初期化===
 
===初期化===
126行目: 162行目:
  
 
==[https://firebase.flutter.dev/docs/auth/overview/ Authentication]==
 
==[https://firebase.flutter.dev/docs/auth/overview/ Authentication]==
===Stableチャネルに切り替え===
+
===Instration===
 +
====Stableチャネルに切り替え====
 
<pre>
 
<pre>
 
$ flutter channel stable
 
$ flutter channel stable
150行目: 187行目:
 
Successfully switched to flutter channel 'stable'.
 
Successfully switched to flutter channel 'stable'.
 
To ensure that you're on the latest build from this channel, run 'flutter upgrade'
 
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>
 
</pre>
  
===pubspec.yaml===
+
====pubspec.yaml====
 
*firebase_authを追記
 
*firebase_authを追記
 
<pre>
 
<pre>
166行目: 212行目:
 
</pre>
 
</pre>
  
===Web===
+
====Web====
 +
----
 
*追記
 
*追記
 
<pre>
 
<pre>
 
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
 
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
 
</pre>
 
</pre>
===iOS/macOS===
+
 
 +
====iOS/macOS====
 +
----
 
*cd ios/macos
 
*cd ios/macos
  
186行目: 235行目:
 
<pre>
 
<pre>
 
platform :osx, '10.12'
 
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>
 
</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 -->