現在、私たちのカードは、GridViewの子フィールドのインラインで作成されています。
この書き方では、読みにくいネストされたコードになりがちです。 空のカードをいくつでも生成できる関数に抽出(extract)して、カードのリストを返すようにします。
具体的には、build（）関数の上に新しいプライベート関数を作成します（アンダースコアで始まる関数はプライベートAPIであることを忘れないでください）。
List<Card> _buildGridCards(int count) {
List<Card> cards = List.generate(
count,
(int index) => Card(アプリに構造ができてきたので、コンテンツをカードに配置して整理しましょう。
カード(Card)ウィジェットは、一つのコンテントに関する内容とアクションを表示する独立した要素です。 これらは、類似したコンテンツをコレクションとして提示するための柔軟な方法です。
カードの詳細については、マテリアルガイドラインのカードの記事をご覧ください。
カードウィジェットの詳細については、Flutterでのレイアウトの構築をご覧ください。
上部のアプリバーの下にカードを1枚追加することから始めましょう。 カードウィジェットだけでは、それを表示できる場所に配置するのに十分な情報がないため、GridViewウィジェットにカプセル化する必要があります。
ScaffoldのbodyパラメータのCenterウィジェットをGridViewウィジェットに置き換えます。
body: GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.all(16.0),
マテリアルコンポーネント（MDC）は、開発者がマテリアルデザインを実装するのに役立ちます。 GoogleのエンジニアとUXデザイナーのチームによって作成されたMDCは、美しく機能的なUIコンポーネントを多数備えており、Android、iOS、ウェブ、Flutter.material.io / developで利用できます。
codelab MDC-101では、2つのマテリアルコンポーネントを使用してログインページを作成しました。テキストフィールドとインクの波紋のあるボタンです。 それでは、ナビゲーション、構造、およびデータを追加して、この基盤を拡張してみましょう。
このコードラボでは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリのホーム画面を作成します。
含まれるもの：
トップアプリバー
製品でいっぱいのグリッドリスト
現在、「Next」ボタンをクリックすると、「I did it！」というホーム画面が表示されます。 それは素晴らしいことです！
しかし、今では、ユーザーは実行するアクションや、アプリ内のどこにいるかについての感覚がありません。 それを助けるために、ナビゲーションを追加する時が来ました。…
注)以下の記事は2020年10月31日時点のコードラボの内容に従って記述していますが、
↓raised_button.dartより抜粋
###このクラス(RaisedButtonクラス)は廃止されました。代わりに[ElevatedButton]を使用してください。
FlatButton、RaisedButton、およびOutlineButtonは、それぞれTextButton、ElevatedButton、およびOutlinedButtonに置き換えられました。
ButtonThemeは、TextButtonTheme、ElevatedButtonTheme、およびOutlinedButtonThemeに置き換えられました。
元のクラス(FlatButton、RaisedButton、およびOutlineButton)は間もなく非推奨になります。それらを使用するコードを移行してください。
新しいボタンとボタンテーマクラスの詳細な移行ガイドがあります
[flutter.dev/go/material-button-migration-guide]（https://flutter.dev/go/material-button-migration-guide）。
「廃止されました」と書いてますが、2020年10月31日時点では動いています。
これからはTextButton、ElevatedButton、およびOutlinedButtonを
使いましょう。
導入
マテリアルデザインは、大胆で美しいデジタル製品を構築するためのシステムです。 一貫した一連の原則とコンポーネントの下でスタイル、ブランディング、インタラクション、モーションを統合することにより、製品チームは最大のデザインの可能性を実現できます。
Flutterのマテリアルコンポーネント（MDC-Flutter）は、アプリやプラットフォーム全体で一貫したユーザーエクスペリエンスを作成するコンポーネントのライブラリと、設計とエンジニアリングを統合します。
マテリアルデザインシステムが進化するにつれて、これらのコンポーネントは、Googleのフロントエンド開発標準に準拠して、一貫したピクセルパーフェクトな実装を保証するように更新されます。 MDCは、Android、iOS、およびWebでも使用できます。
このコードラボでは、MDCFlutterのいくつかのコンポーネントを使用してログインページを作成します。
このコードラボは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリの作成をガイドする4つのコードラボの最初のものです。 MDC-Flutterを使用して、ブランドやスタイルを反映するようにコンポーネントをカスタマイズする方法を示します。
このコードラボでは、以下を含むShrineのログインページを作成します。
android
null safety article
ほとんどのアプリでは、インターネットからデータを取得する必要があります。幸いなことに、DartとFlutterは、このタイプの作業用のパッケージとしてhttpパッケージなどのツールを提供しています 。
このレシピでは、次の手順を使用します。
httpパッケージを追加します。httpパッケージを使用してネットワークリクエストを行います。http packageこのhttpパッケージは、インターネットからデータをフェッチする最も簡単な方法を提供します。
httpパッケージをインストールするには、pubspec.yamlファイルの依存関係セクションにパッケージを追加します。httpパッケージの最新バージョンは pub.devにあります。
dependencies:
http: <latest_version>
単体テストは、ライブWebサービスまたはデータベースからデータをフェッチするクラスに依存する場合があります。 これはいくつかの理由で不便です：
したがって、ライブWebサービスまたはデータベースに依存するのではなく、これらの依存関係を「モック」することができます。
モックを使用すると、ライブWebサービスまたはデータベースをエミュレートし、状況に応じて特定の結果を返すことができます。
一般的に言えば、クラスの代替実装を作成することで依存関係をモックできます。 これらの代替実装を手作業で作成するか、ショートカットとしてMockitoパッケージを利用してください。
このレシピは、次の手順を使用してMockitoパッケージを使用したモックの基本を示しています。
1.Mockitoパッケージを追加します。
2.テストするための関数を定義します。
3.http.Clientのモックを使用したテストファイルを作ります。
4.それぞれの条件でのテストを記述します。
5.テストを実行します。
さらなる情報は Mockito packageをご覧ください。
1.Mockitoパッケージを追加します。
mockitoパッケージを使用するために、下記のように、pubspec.yamlファイルのdev_dependenciesセクションに
mockito
と
flutter_test
パッケージを追加します。
今回のサンプルでもhttpパッケージを使いますので、pubspc.yamlファイルのdependenciesセクションに追加します。
mockito : 5.0.0 はコード自動生成によりDartのnull-safetyをサポートしています。必要なコード自動生成を実行するために、build_runnerパッケージをdev_dependenciesセクションに追加します。
dependencies:
機能を追加したり、既存の機能を変更したりしても、アプリが引き続き機能することをどのように確認できますか？ テストを書くことによって。
単体テストは、単一の関数、メソッド、またはクラスの動作を検証するのに便利です。 testパッケージは単体テストを作成するためのコアフレームワークを提供し、flutter_testパッケージはウィジェットをテストするための追加のユーティリティを提供します。
このレシピは、次の手順を使用して、testパッケージによって提供されるコア機能を示しています。
testパッケージについてのさらなる情報は、 test package documentation.をご覧ください。
testパッケージは、Dartでテストを作成するためのコア機能を提供します。 これは、Web、サーバー、およびFlutterアプリで使用されるパッケージを作成する場合の最良のアプローチです。
dev_dependencies:
test: <latest_version>2.testファイルを作成します。
この例では、counter.dartとcounter_test.dartの2つのファイルを作成します。
counter.dartファイルには、テストするクラスが含まれており、libフォルダーにあります。 counter_test.dartファイルには、テスト自体が含まれており、testフォルダー内にあります。
通常、テストファイルはFlutterアプリケーションまたはパッケージのルートにあるテストフォルダー内にある必要があります。 …
アプリの機能が多ければ多いほど、手動でテストするのは難しくなります。 自動テストは、機能とバグ修正の速度を維持しながら、アプリを公開する前にアプリが正しく実行されることを確認するのに役立ちます。
注：Flutterアプリをテストする実践的な練習については、Flutterアプリのコードラボをテストする方法を参照してください。
| Unit | Widget | Integration | |
|---|---|---|---|
| Confidence(信頼性) | Low | Higher | Highest |
| Maintenance cost
(メンテナンスコスト) |
Low | Higher | Highest |
| Dependencies
(依存性) |
Few | More | Most |
| Execution speed
(実行スピード) |
Quick | Quick | Slow |
工事中🏗
特定のユースケースに対応するパッケージが存在しない場合は、カスタムパッケージを作成できます。
すべてのパッケージには、パッケージのpubspec.yamlファイルで指定されたバージョン番号があります。 パッケージの現在のバージョンがそのパッケージ名の横に表示され（たとえば、url_launcherパッケージを参照）、以前のすべてのバージョンのリスト（url_launcherバージョンを参照）も表示されます。
例えば、pubspec.yamlファイル下記のフォーム(省略形)で記述すると、
plugin1:
これは、「plugin1パッケージの任意のバージョンを使用できる」ことを意味します。 パッケージの更新時にアプリが破損しないようにするには、次のいずれかの形式を使用してバージョン範囲を指定します。
●範囲の制約：最古バージョンと最新バージョンを指定します。 例えば：
dependencies:
url_launcher: '>=5.4.0 <6.0.0'キャレット( ^ )構文の範囲制約は、通常の範囲制約に似ています。
dependencies:
collection: '^5.4.0'詳しい情報は, package versioning guide.をご覧ください。
Cloud Firestoreは、コレクションをクエリするための高度な機能を提供します。 クエリは、1回限りの読み取りまたは変更のサブスクライブの両方で機能します。
コレクション内のドキュメントをフィルタリングするには、whereメソッドをコレクション参照にチェーンできます。 フィルタリングは、同等性チェックと「in」クエリをサポートします。 たとえば、年齢が20歳を超えるフィルターユーザーの場合：
FirebaseFirestore.instance
.collection('users')
.where('age', isGreaterThan: 20)
.get()
.then(...);
firestoreデータベースbcffの状況↓
(‘users’コレクションに4つのドキュメントがあります。)
//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 {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
… 