2021/2/15 Positioned classの訳

Positioned class

Stackの子が配置される場所を制御するウィジェット。

PositionedウィジェットはStackウィジェットの子孫ウィジェットである必要があります。そしてPostionedウィジェットとその祖先のStackウィジェットの間にはStatelessWidget、あるいはStatefulWidgetである必要があります。(それ以外のウィジェット、例えばRenderObjectWidgetのようなウィジェットは不可です。)

Being able to arbitrarily combine and overlay widgets atop one another,

ウィジェットを思いのままに 互いに組み合わせたり上に重ねたりするのは、

 

it’s simple in Flutter using the Stack widget.

Stackウィジェットを使えば Flutterでは簡単です。

 

But how do you position those widgets in a Stack?

でも …

2021/2/14 Migrating to null safetyの訳

Migrating to null safety

このページでは、コードをnullセーフティに移行する方法とタイミングについて説明します。

所有している各パッケージを移行するための基本的な手順は次のとおりです。

migrate:移住する、移行する、移動する

ここではnull-safetyバージョンに移行する、null-safetyに対応する、という意味。

  1. あなたのパッケージ内で使用しているパッケージがマイグレートされるのを持ちます。
  2. あなたのパッケージのコードをマイグレートします。できれば、インタラクティブ移行ツールを使用しましょう。
  3. あなたのパッケージのコードを静的に分析します。
  4. 変更(マイグレート)が機能するかテストします。
  5. もしパッケージがすでにpub.devに公開されている場合は、prereleaseバージョンとしてnull-safeバージョンを公開ましす。

アプリの移行は、技術的にはパッケージの移行と同じです。 アプリを移行する前に、nullの安全性が安定したリリースになり、すべての依存関係の準備が整うまで待つことを検討してください。

マイグレーションツールの使用体験に関する非公式の動画を以下に示します。


1. Wait to migrate

依存関係のグラフの葉を最初にマイグレートして、順番にマイグレートを進めていくことを強くお勧めします。

例えば、

パッケージCの中でパッケージBを使用している(パッケージBに依存している)。

パッケージBの中でパッケージAを使用している(パッケージAに依存している)。

という状況では、まず最初にパッケージAをマイグレートし、次にパッケージBを、その次にパッケージCをマイグレートすべきです。

Illustration of C/B/A sentence

自分のパッケージが依存しているパッケージがnull-safetyをサポートする前に、自分のパッケージをマイグレートすることも可能です。

しかし、自分のパッケージのマイグレート後に、「依存しているパッケージ」がマイグレートされると、また自分のパッケージのコードを変更しないといけなくなる可能性があります。

自分のパッケージ内の、ある関数の引数をnullable型と予想として実装したあとで、依存しているパッケージが、対応する変数の型をnon-nullable型で実装(マイグレート)していた場合、nullable型の値を渡そうとするとコンパイルエラーになります。

あなたのパッケージに依存しているパッケージ(あなたのパッケージを利用しているパッケージ)をマイグレートする前に、あなたのパッケージをマイグレートするべきです。nullセーフパッケージは、Dart 2.12ベータ以降を使用している限り、まだnullセーフティを使用していないパッケージやアプリで使用できます。 たとえば、DartおよびFlutterコアライブラリはnullセーフであり、nullセーフティに移行していないアプリでも引き続き使用できます。

このセクションでは、null-safetyモードのdart pub outdatedコマンドを使用して、パッケージの依存関係を確認および更新する方法について説明します。 この手順では、変更を簡単に元に戻すことができるように、コードがソースコントロール下にあることを前提としています。


Switch to a

2020/12/19 :Consumer classの訳

Obtains Provider<T> from its ancestors and passes its value to builder.

先祖ウィジェットからProvider<T>を取得し、builderにその値を渡す。

そのまま訳しているが、取得するのはT型のはず。

Consumerウィジェットはファンシーな挙動はありません。新しいウィジェットの中でただProvider.ofメソッドを呼び出すだけです。そしてbuildメソッドの返り値としてbuilderフィールド(にセットされたコールバック)の返り値を返します。

builderはnullではいけません。そしてbuilderは何回も呼び出されます。(Provider.ofで取得した値が変化する度に)

Consumerウィジェットには二つの主な目的があります。

Providerの子孫ウィジェットのBuildContextを用いることができない場合でもProviderが提供する値(value)を取得できます。それゆえProvider.ofは使えません。

このシナリオは、以下のようなコードで発生します。

@override
Widget build(BuildContext context) {
  return ChangeNotifierProvider(
    create: (_) => Foo(),
    child: Text(Provider.of<Foo>(context).value),
  );
}

5行目のcontextは2行目の引数のcontextなので、5行目の

Provider.of<Foo>(context)

は、このbuildメソッドを持つウィジェットの祖先ウィジェットからFoo型を探す。実際やりたいのは、3行目のChangeNotifierProviderが提供するFoo()を取得したい訳なので、意図とは違う挙動、ということになる。

このサンプルはProviderNotFoundExceptionをスローします。なぜなら、Provider.ofはProviderの祖先のBuildContextを引数に渡されて呼び出されているからです。…

2020/11/5 Get to know Firebase for Flutterの訳パート2

<<前のページへ

7. Read messages

Synchronize messages

ゲストがデータベースにメッセージを書き込むことができるのは素晴らしいことですが、アプリではまだメッセージを見ることができません。

メッセージを表示するには、データが変更されたときにトリガーされるリスナーを追加してから、新しいメッセージを表示するUI要素を作成する必要があります。 アプリから新しく追加されたメッセージをリッスンするコードをアプリケーションの状態に追加します。

lib / main.dartに、次のインポートを追加します。 これにより、StreamSubscriptionクラスにアクセスできるようになります。このクラスを使用して、ユーザーがログアウトしたときにクエリサブスクリプションをキャンセルできるようにします。

//lib.main.dart
import 'dart:async';  // new

次に、GuestBookウィジェットのすぐ上に次の値クラス(モデルクラス)があります。 このモデルクラスは、CloudFirestoreに保存しているメッセージデータの構造化ビューを公開します。

ウィジェットクラス内ではモデルクラスのインスタンスとしてメッセージデータを扱うのが定石。

モデルクラスを用意した方が、GuestBookMessageクラスに新しいフィールドを追加する必要が出た時などに、コードの修正が容易になる。

//lib/main.dart
class GuestBookMessage {
  GuestBookMessage({@required this.name, @required this.message});
  final

2020/11/4 Get to know Firebase for Flutterの訳パート1


1. Before you begin

このコードラボでは、AndroidおよびiOS用のFlutterモバイルアプリを作成するためのFirebaseの基本のいくつかを学習します。

前提条件

このコードラボは、Flutterにある程度精通しており、FlutterSDKとエディターがインストールされていることを前提としています。


What you’ll create

このコードラボでは、Flutterを使用してAndroidとiOSの両方でイベントRSVPとゲストブックチャットアプリを構築し、Firebase Authenticationでユーザーを認証し、CloudFirestoreを使用してデータを同期します。


必要なもの

このコードラボは、次のデバイスのいずれかを使用して実行できます。

(1)コンピューターに接続され、開発者モードに設定されている物理デバイス(AndroidまたはiOS)。
(2)iOSシミュレーター。 (Xcodeツールをインストールする必要があります。)
(3)Androidエミュレーター。 (Android Studioでのセットアップが必要です。)

上記に加えて、次のものも必要になります。

Chromeなどの選択したブラウザ。
DartおよびFlutterプラグインで構成されたAndroidStudioやVSCodeなど、選択したIDEまたはテキストエディター。
Flutterの最新の安定バージョン(または、エッジでの生活を楽しんでいる場合はベータ版)。 FlutterFireはWebとmacOSもサポートしていますが、これらのターゲットはこのコードラボではカバーされていません。
Firebaseプロジェクトを作成および管理するためのGmailアカウントなどのGoogleアカウント。
codelabのサンプルコード。 コードを取得する方法については、次の手順を参照してください。


2. Get the sample code

コマンドラインからGitHubリポジトリのクローンを作成します。

git clone https://github.com/flutter/codelabs.git flutter-codelabs

サンプルコードは、コードラボのコレクションのコードが含まれているflutter-codelabsディレクトリに複製されます。 このコードラボのコードはflutter-codelabs …

2020/10/26 Flutter✖️Firebase : Cloud Firestoreパッケージを使用する

 

前回firebase_authを使えるところまできたので、今回は変更後(breaking change)のバージョンのCloud Firestoreを使っていきます。

前回作ったbc_ffプロジェクトでやっていきます。

まず依存関係のコードをpubspec.yamlに追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.18.1+2
  google_sign_in: ^4.5.1
  flutter_signin_button: ^1.0.0
  cloud_firestore: ^0.14.1+3  #←追加

現時点での最新バージョンを追加します。


https://firebase.flutter.dev/docs/firestore/usage#collections–documents

本来ファイルを分けて別画面(ウィジェット)作るのが普通ですが、動くかどうかのテストなのでmain.dartに追加します(笑)

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/button_builder.dart';

import './register_page.dart';
import './signin_page.dart';

import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async 

2020/10/26 Flutter✖️Firebase : FirebaseプロジェクトとFlutterアプリの接続(iOS編))

 

コンソールで「+アプリを追加」ボタンを押して、

iOSアイコンをクリックします。


(1)アプリの登録

iOSバンドルIDを入力します。

android studioの

プロジェクトルート(bc_ff)/iOSディレクトリ上で右クリックして開いたメニューから、

「Flutter」>>「Open iOS module in Xcode」を選択してXcodeを起動します。


トップのRunnerディレクトリを選択、TARGETセクションを選択、Generalタブを選択、

「Bundle Identifier」欄が「iOSバンドルID」ですので、これをコピーします。(例ではcom.example.bcFf)

コンソールに戻って「iOSバンドルID」欄にコピーしたものを貼り付けます。

残りの二つは省略して「アプリを登録」ボタンを押します。


(2)設定ファイルのダウンロード

「GoogleService-info.plistをダウンロード」ボタンを押して設定ファイルをダウンロードします。


ダウンロードしたファイルを上記の場所に移動させます。

Runner/Runnerディレクトリに移動。


上記の確認画面が出てきますので、上記箇所がチェックされていることを確認してFinishボタンを押し、移動を完了させます。

「Copy Item if needed」にチェックを付けないと、実際にはコピーされず、ファイルへの参照が作られるだけなので、ダウンロードしたファイルを削除した時に、参照するファイルが無い、ということで突然エラーが発生します。

何が原因かわかりにくいので非常に困ります(笑)


Firebaseコンソールページに戻り、「次へ」ボタンを押します。


(3)Firebase SDKの追加

とありますが、ここはFlutterがやってくれるので、何もせずに「次へ」ボタンを押し、次に進みます。


(4)初期化コードの追加

とありますが、ここも不要なので何もせずに次に進みます。


以上でiOSの設定も終了です。

では接続できているか確認してみましょう。

firebase_authを使用します。

https://pub.dev/packages/firebase_auth

↑サンプルコードの上にgithubへのリンクがあるのでリンク先へ行きます。

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/main.dart

2020/10/26 Flutter✖️Firebase : FirebaseプロジェクトとFlutterアプリの接続(android編))

1.Firebaseプロジェクトを作る。(プロジェクト名bcff)

2.Flutterプロジェクトを作る。(プロジェクト名bc_ff)


(1)アプリの登録

アンドロイドアイコンをクリックします。


「Android パッケージ名」欄にAndroid パッケージ名を入力します。

Android パッケージ名は、

プロジェクトルート(この例ではbc_ff)/android/app/build.gradle

のdefaultConfigセクションの「applicationId」部分にあります↓

この例では

com.example.bc_ff

がAndroid パッケージ名です。


↑ということで「Android パッケージ名」欄にAndroid パッケージ名を入力します。


「デバッグ用の署名証明書 SHA-1」欄を入力します。(Googleログインなどを利用しない場合は不要。)

❓をクリックすると以下のようなメッセージが出てくるので、リンク先へいきます。

keytool を使用して署名証明書の SHA-1 ハッシュを入手する方法については、こちらのページをご覧ください

https://developers.google.com/android/guides/client-auth

↑赤線部分のコード(2行全て)をコピーします。

android studioのterminalを開いてコピーしたコードを貼り付け、実行(エンターキーを押す)します。

「キーストアのパスワードを入力してください: 」

と言われますが、何も入力せずにエンターキーを押します。

証明書のフィンガプリント:

のSHA1部分のキーをコピーし、Firebaseコンソールページに戻り、

「デバッグ用の署名証明書 SHA-1」欄に貼り付けます。


「アプリを登録」ボタンを押します。


(2)設定ファイルのダウンロード…

2020/10/26 Firebase : Cloud Firestore/Usageの訳パート1

 

 

 

プロジェクトでCloud Firestoreパッケージを使う場合、プロジェクトファイルのトップでインポートしてください。

import 'package:cloud_firestore/cloud_firestore.dart';

Firestoreを使用する前に、まずFlutterFireを初期化したことを確認してください。


新しいFirestoreインスタンスを生成するには、以下のようにFirebaseFirestoreクラスのゲッター、instanceを参照してください。

FirebaseFirestore firestore = FirebaseFirestore.instance;

デフォルトでは、これにより、プラットフォームにFlutterFireをインストールするときに使用されるデフォルトのFirebaseアプリを使用してFirestoreとやり取りできます。 ただし、セカンダリFirebaseアプリでFirestoreを使用する場合は、instanceForメソッドを使用します。工事中🏗

FirebaseApp secondaryApp = Firebase.app('SecondaryApp');
FirebaseFirestore firestore = FirebaseFirestore.instanceFor(app: secondaryApp);

Collections & Documents

Firestoreは、「コレクション」に含まれる「ドキュメント」内にデータを格納します。 ドキュメントには、ネストされたコレクションを含めることもできます。 たとえば、ユーザーはそれぞれ、「Users」コレクション内に独自の「ドキュメント」を保存します。 collectionメソッドを使用すると、コード内でコレクションを参照できます。

下記のサンプルはusersコレクションを参照し、ボタンが押された時に新しいuserドキュメントを生成します(書き込みます)。

import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class AddUser extends StatelessWidget 

2020/8/23 Firebase:Choose a data structureの訳

 

Cloud Firestore >> Add and manage data >> Structure data

Cloud Firestoreであなたのデータ構築する時、いくつかの方法があります。

  • Documents
  • Multiple collections
  • Subcollections within documents

それぞれの方法の利点をあなたのユースケースと照らし合わせて考えていきましょう。このガイドでいくつかの階層構造のデータの構築のサンプルを見ていきます。

Nested data in documents

ドキュメント内で、配列やマップのように複雑なオブジェクトをネストする方法です。

利点:ドキュメント内で長さの決まっているシンプルなlists(配列)データがある場合、セットアップが用意です。

制限:他の方法のようなスケーラビリティはありません。リストの長さが大きくなると、ドキュメントも大きくなります。そうするとドキュメント取得に時間がかかります。

ユースケース:例えば、チャットアプリのプロフィール内で、そのユーザの最近の3つの訪れたチャットルームを保存したい場合。

 

Subcollections

時間の経過と共にデータ量が増える可能性のあるデータの場合ドキュメント内にサブコレクションを生成する方法が良いです。

利点:ドキュメント内のリスト(配列)の要素数が増えても、ドキュメントのサイズを変えたくない場合に適しています。サブコレクションに置いて完全なクエリ能力を獲得できます。また、サブコレクションに対してcollection group queriesを発することができます。

制限:サブコレクションを簡単に削除することができません。

ユースケース:例えば、チャットアプリで、チャットルームドキュメントの中にusersサブコレクションを作る、あるいはチャットルームドキュメントの中にmessagesサブコレクションを作る、というようなケース。

 

Root-level collections

異なる種類のデータセットを扱うために、Firestoreのルートレベルに複数のコレクションを作る方法です。…