MDC-102：材料構造とレイアウト

マテリアルデザインは、使いやすさを保証するナビゲーション形式を提供します. 最も目に見えるコンポーネントの1つは、上部アプリケーションバーです.

Google Play開発者アカウントを作成します

あなたの個人情報、あなたの選択のアドレス、そしてあなたのパスワードを通知する.

一般的な販売条件（GTC）を受け入れる.

自分の素敵な写真を追加してください.

Google Play開発者アカウントを作成します

Google Play開発者アカウントを作成する手順は、Appleよりもはるかに簡単です.

Gmailアドレスに接続します.

GTCを受け入れます.

登録料の調整：25ユーロの単一支払いで、選択したすべてのアプリケーションを公開します !

アカウントに関連する情報を通知する：開発者名、メールアドレス、電話番号.

これはあなたの質問に答えました ?

コメントありがとうございますあなたのコメントを送信する問題がありました. 後でもう一度やり直してください.

2021年11月9日の最後の更新

関連記事

• Google Playコンソールにアプリケーションを作成します
• Android P12証明書を生成します
• APKまたはAABファイルをエクスポートします
• Androidアプリケーションを公開します
• Playストアの外にAndroidアプリを公開します
• Google Playストアで公開します

MDC-102：材料構造とレイアウト

材料コンポーネント（MDC）が開発者が材料設計を実装するのに役立ちます. Googleのエンジニアチームとユーザーエクスペリエンススペシャリストが設計したMDCは、エレガントで機能的な数十のユーザーインターフェイスコンポーネントを提供しています. Android、iOS、Web、Flutterで利用できます.材料.IO/開発.

MDC-101プログラミングワークショップでは、2つのマテリアルコンポーネント要素を使用して接続ページを作成しました。「インク」アニメーションで構成されるテキストフィールドとボタン. これらのベースでは、ナビゲーション、構造、データを追加してアプリケーションを豊かにしましょう.

ワークショップの目的

このプログラミングワークショップでは、 神社, 家の衣類とアイテムの販売のためのeコマースアプリケーション. この画面には以下が含まれます。

• より高いアプリケーションバー
• グリッドの形の製品のリスト

スクリーンショットを除き、このプログラミングワークショップはマテリアル3に置き換えられたことに注意してください. それにもかかわらず、彼らは同じ情報を伝えます.

このプログラミングワークショップは、Sanctuaryという製品のアプリケーションを作成するのに役立つ4つのワークショップのうちの2番目です。. タスクを少しずつ進めるために、すべてのプログラミングワークショップを順番にフォローすることをお勧めします. あなたはあなたのプログラミングワークショップをここにあります：

• MDC-101フラッター：材料コンポーネントの基本原則
• MDC-103フラッター：材料デザインのテーマの使用（色、形、標高、タイプ）
• MDC-104フラッター：高度な材料設計コンポーネント

このプログラミングワークショップの材料フラッター材料コンポーネントとサブシステム

• アッパー
• グリッド
• カード

このプログラミングワークショップでは、マテリアルフラッターが提供するデフォルトコンポーネントを使用します. MDC-103セクションでそれらをカスタマイズすることを学びます：材料デザインのテーマの使用（色、形状、標高、タイプ）.

Flutterによる開発における経験のレベルをどのように評価しますか ?

2. フラッター開発環境を構成します

このワークショップには、2つのソフトウェアが必要です。フラッターSDKとパブリッシャー.

次のデバイスのいずれかでプログラミングワークショップを実行できます。

• コンピューターに接続され、開発者モードに設定されたAndroidまたは物理iOSデバイス.
• iOSシミュレーター（インストールするxcodeツール）.
• Androidエミュレーター（Android Studioで構成する必要があります）.
• ブラウザ（クロムはデバッグに必要です）.
• Windows、Linux、またはMacOSデスクトップとして. 展開する予定のプラットフォームでアプリケーションを開発する必要があります. たとえば、Windowsデスクトップアプリケーションを開発する場合は、適切なコンピレーションチェーンにアクセスするにはWindowsでそれを行う必要があります. また、ドキュメントに詳述されているオペレーティングシステムの特定の要件についてもご覧ください.ひらひら.開発/デスクトップ.

3. プログラミングワークショップの出発アプリをダウンロードしてください

あなたはすでにMDC-101ワークショップに従っています ?

MDC-101プログラミングワークショップが終了した場合、コードはこのワークショップを開始する準備ができている必要があります. 次の段階に進みます： より高いアプリケーションバーを追加します.

あなたはゼロから始めます ?

開始ワークショップの出発アプリケーションをダウンロードします

開始アプリケーションは、マテリアルコンポーネント-Flutter-Codelabs-102-Starter_and_101-complete/mdc_100_seriesにあります .

…またはGithubからワークショップをクローンします

Githubからこのプログラミングワークショップをクローンするには、次のコマンドを実行します。

gitクローンhttps：// github.com/material-components/material-components-flutter-codelabs.Git CD Material Components-Flutter-Codelabs/MDC_100_Series Git Checkout 102-Starter_and_101-Complete

助けについては、Githubのクローニングセクションを参照してください

正しいブランチを選択してください

104でのMDC-101プログラミングワークショップは互いに依存しています. したがって、MDC-102ワークショップのコードを完了すると、MDC-103ワークショップの開始コードになります. コードはいくつかのブランチに分割され、このコマンドを使用してリストを表示できます。

gitブランチ – リスト

完成したコードを表示するには、103-Starter_and_102-Complete Branchにアクセスしてください .

プロジェクトを開き、アプリケーションを実行します

1. お好みの出版社でプロジェクトを開きます.
2. 選択した出版社に関する指示に従ってください. Get Started> Test Driveページ（最初の手順>テスト）で「アプリを実行する」段落（アプリケーションを実行）にアクセスできます.

成功した操作. MDC-101プログラミングワークショップのサンクチュアリ接続ページをデバイスに表示する必要があります.

接続画面が配置されたので、アプリケーションにいくつかの製品を追加しましょう.

4. より高いアプリケーションバーを追加します

とりあえず、「次の」ボタンをクリックすると、ホーム画面がメッセージで表示されます「あなたはそれをしました!「（あなたは成功しました.）））. 完璧. ただし、ユーザーには何もすることがなく、彼がアプリケーションのどこにいるのかわかりません. あなたを助けるために、ナビゲーションを追加する時が来ました.

そこには ナビゲーション ユーザーがアプリケーションでナビゲートできるようにするコンポーネント、インタラクション、視覚インジケーター、および情報アーキテクチャを指します. コンテンツと機能を発見し、タスクを簡単に実行できます.

詳細については、マテリアルデザインの指示におけるナビゲーションに専念する記事を参照してください.

マテリアルデザインは、使いやすさを保証するナビゲーション形式を提供します. 最も目に見えるコンポーネントの1つは、上部アプリケーションバーです.

iOSの「ナビゲーションバー」という名前で、または単に「アプリケーションバー」または「ヘッダー」という名前でこの要素を知っているかもしれません.

ユーザーに他のアクションにすばやくアクセスできるようにするには、より高いアプリケーションバーを追加しましょう.

AppBarウィジェットを追加します

自宅で.dart、appbarを「足場」に追加してから、強調表示されたconstを削除します。

const scaffold（// todo：appbar（102）appbar：appbar（// todo：ボタンとタイトルの追加（102））を返す, 

の追加appbar AppBarフィールドで：足場を使用すると、完璧で無料のレイアウトを取得でき、アプリケーションバーをページの上部と体の下に残すことができます。.

足場 MaterialAppsの重要なウィジェットです. パネル、「スナックバー」通知バー、ボトムシート要素など、あらゆる種類の現在の事項コンポーネントを表示するための実用的なAPIを提供します. フローティングアクションボタンの配置を容易にします.

足場の詳細については、フラッタードキュメントを参照してください.

プロジェクトを記録します. 神社が更新されたら、クリックしてください 次 （以下）ホーム画面を表示します.

要素は適切に配置されていますが、タイトルがありません.

テキストウィジェットを追加します

自宅で.DART、AppBarアプリケーションバーにタイトルを追加します。

// dodo：アプリバーを追加（102）appbar：appbar（// dodo：ボタンとタイトル（102）タイトル：const text（ 'sholy'）、// todo：トレイルボタンを追加（102） 

プロジェクトを記録します.

各プラットフォームのバリエーションに気づいたかもしれません. マテリアルデザインシステムは、各プラットフォーム（Android、iOS、Web）が異なり、ユーザーの期待が異なることを考慮しています. たとえば、iOSでは、タイトルはほとんど常に中心です. これは、UIKITが提供するデフォルトの動作です. Androidでは、左側に並んでいます. したがって、エミュレータまたはAndroidデバイスを使用する場合、タイトルを左に並べる必要があります. シミュレーターまたはiOSデバイスの場合、中央に配置する必要があります.

詳細については、マテリアルデザインを備えたさまざまなプラットフォームへの適応についてこの記事を参照してください.

多くのアプリケーションバーにはタイトルの横にボタンがあります. アプリケーションにメニューアイコンを追加します.

行の開始時にアイコンボタンボタンを追加します

いつも家にいます.DART、先行フィールドのアイコンボタン要素を定義します：AppBarアプリケーションバーの. （タイトルフィールドの前にそれを配置します：開始から行の開始から終了までの開始に応じて）：

 // TODO：ボタンとタイトル（102）を追加してください：Iconbutton（Icon：const Icon（Icon）.メニュー、セマンティックラベル： 'メニュー'、）、onpressed：（） < print('Menu button'); >, ）））, 

プロジェクトを記録します.

メニューアイコン（「ハンバーガー」とも呼ばれます）は、目的の場所に表示されます.

クラス Iconbutton マテリアルアイコンをアプリケーションに統合する実用的な方法です. 彼女はウィジェットを使用しています アイコン. フラッターには教室にアイコンの完全なコレクションがあります アイコン. アイコンは「const」チャネルマッピングに従って自動的にインポートされます.

アイコンのクラスの詳細については、Flutterドキュメントを参照してください. アイコンウィジェットの詳細については、フラッタードキュメントを参照してください.

ラインの最後にボタンを追加することもできます. フラッターでは、これらのボタンは「アクション」と呼ばれます.

条項 始まり そして 終わり 関係する言語に関係なく、読書の意味を表現する. 英語など、左から右に読む舌で作業するとき, 始まり 手段 左の方です そして 終わり 手段 右の方へ. アラビア語のように、右から左へと読む言語で、用語 始まり 手段 右の方へ, そして 終わり 手段 左の方です.

ユーザーインターフェイスの反転の詳細については、双方向性に関するマテリアルデザインの指示を参照してください.

アクションを追加します

他の2つのアイコンボタン要素には十分なスペースがあります.

タイトルの後にappbarインスタンスにそれらを追加します。

// TODO：トレイルボタン（102）アクションを追加：[iconbutton（icon：const icon（icon）.検索、semanticLabel： 'search'、）、ontpresd：（） < print('Search button'); >, ）、iconbutton（アイコン：constアイコン（アイコン）.tune、semanticlabel： 'filter'、）、onpresd：（） < print('Filter button'); >, ）、], 

プロジェクトを記録します. ホーム画面は次のように発生する必要があります。

アプリケーションには、行の開始時にボタン、タイトル、右側の2つのアクションがあります. アプリケーションバーにも効果があります標高 コンテンツのレベルとは異なるレベルにあることを示すわずかな色合いのため.

アイコンクラスでは、フィールド セマンティックラベル アクセシビリティ情報をフラッターに追加する一般的な方法です. IOS AccessibilityLabelbelのAndroidコンテンツの言葉遣いとuiaccessibility機能に非常に近いシステムです . 多くのコースでそれを見つけるでしょう.

このフィールドに含まれる情報により、このボタンの役割に関するスクリーンリーダーに関する情報を提供することができます.

ウィジェットにセマンティックラベルフィールドがない場合：、ウィジェットでカプセル化できます セマンティクス. Semanticsウィジェットの詳細については、Flutterドキュメントを参照してください.

5. グリッドにシートを追加します

アプリケーションがもう少し構造化されたので、ファイルに入れてコンテンツを整理しましょう.

カード 特定の主題に関連するコンテンツとアクションを表示する独立した要素です. コレクションの形で同様のコンテンツを提示する柔軟な方法を提供します.

詳細については、マテリアルデザインの指示のファイルに専念する記事を参照してください.

カードウィジェット（シート）の詳細については、Flutterでのレイアウトの作成に関する記事を参照してください.

GridViewウィジェットを追加します

上部のアプリケーションバーの下にシートを追加することから始めましょう. 現在、ウィジェット カード （シート）目に見えて自分自身を配置するのに十分な情報が含まれていません. したがって、ウィジェットでカプセル化します グリッドビュー.

足場要素の本体の中心をGridViewウィジェットに置き換えます。

// TODO：グリッドビュー（102）ボディを追加：グリッドビュー.count（crossaxiscount：2、パディング：const edgeinsts.すべて（16.0）、ChildAspectratio：8.0/9.0、// todo：カードのグリッドを構築する（102）子供：[card（）]、）、）, 

このコードを分析しましょう. GriverウィジェットはメーカーCount（）を呼び出します。これは、表示する要素の数をカウントでき、無限ではないため. しかし、彼はレイアウトを定義するために追加情報が必要です.

CrossAxiscount変数：1行あたりの要素数を示します. 2つの列を取得したいです.

l ‘横軸 フラッターでは、スクロールしない軸に対応しています. スクロール感は呼ばれます 主軸. GridViewのデフォルトのケースと同様に、垂直スクロールを使用する場合、横軸は水平です.

詳細については、レイアウトの作成専用のページを参照してください.

パディングフィールド：Gridviewウィジェットの四辺にある自由空間を定義します. もちろん、このマージンは、要素の結果として、またはその下には見えません。.

ChildAspectoフィールド：比率の形の要素のサイズを識別します（高さの幅）.

デフォルトでは、GridViewは同じサイズのブロックを作成します.

シートがありますが、空です. このシートに子供のウィジェットを追加します.

内容を置きます

シートには、画像の領域、タイトル、セカンダリテキストを含める必要があります.

Gridviewウィジェットから子供を更新します：

// todo：カードのグリッドを構築する（102）子供：[カード（クリップベハビオール：クリップ.アンチアリアス、子：列（Crossaxisalignment：Crossaxisalignment.Start、Children：[aspetratio（aspectratio：18.0/11.0、子供：画像.資産（ '資産/ダイヤモンド.png '）、）、パディング（パディング：constエッジインスト.fromltrb（16.0、12.0、16.0、8.0）、子：列（Crossaxisalignment：CrossAxisalignment.Start、Children：[text（ 'title'）、const sizedbox（height：8.0）、Text（ 'Secondary Text'）、]、）、）、]、）、）]], 

このコードは、子供のウィジェットを垂直にすることができる列ウィジェット（列）を追加します.

CrossAxisAlignmentパラメーター：フィールドは、CrossAxisAlignment値を指定します.開始、「「行の始まり」「サイド」のテキストを整列させることを意味します.

ウィジェット アスペクト比 提供された画像のタイプに関係なく、表示された画像の割合を定義します.

要素 パディング テキストのマージンを定義します.

2つのウィジェット 文章 他の1つの上に配置され、8つの空のスペースポイントで分離されます（サイズボックス）））. 別の要素を作成します カラム インテリアマージンを与えるため.

プロジェクトを記録します.

この概要では、シートがマージンで配置され、角が丸くなり、影を投影することがわかります（標高を表しています）. フォーム全体は、材料設計システムの「コンテナ」と呼ばれます（コンテナと呼ばれるウィジェットクラスと混同しないでください）.

容器とは別に、シートのすべての要素は材料でオプションです. ヘッダーテキスト、ステッカーまたはアバター、サブタイトルのテキスト、セパレーター、さらにはにきびやアイコンを追加できます.

シートのコンテンツの詳細については、この記事をマテリアルデザインの指示でご覧ください.

シートは通常、他のシートとともにコレクションに表示されます. グリッド内のコレクションの形でそれらを配置します.

6. ファイルのコレクションを作成します

画面にいくつかのシートが存在する場合、それらは1つ以上のコレクションにグループ化されます. コレクションのファイルはコプラナーです。彼らはすべて同じ標高を持っています（つまり、それらが選択または移動されていないときに、ここではしません）.

ファイルのコレクションを作成します

今のところ、私たちのシートは子供のフィールド内に配置されています：Gridviewグリッド. これは、読みにくい大量のネストされたコードにつながります. コードのこの部分を、必要な数の空のシートを生成し、ファイルのリストを返すことができる関数に変換しましょう.

build（）関数の上にプライベート関数を作成します（下線線から始まる関数はプライベートAPIであることを忘れないでください）：

// todo：カードのコレクションを作成（102）リスト_buildgridcards（int cent） < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ）;返品カード。 > 

Gridviewウィジェットの子供フィールドで生成されたファイルを割り当てます. するのを忘れないで GridViewウィジェットに含まれるすべての要素をこの新しいコードに置き換えます ::

// TODO：グリッドビュー（102）ボディを追加：グリッドビュー.count（crossaxiscount：2、パディング：const edgeinsts.すべて（16.0）、ChildAspectratio：8.0/9.0、子供：_buildgridcards（10）//交換）, 

プロジェクトを記録します.

カードは存在しますが、今のところ何も表示しません. 製品データを追加する時が来ました.

製品データを追加します

アプリケーションには、画像、名前、価格のある製品が含まれています. これをファイルに既に存在するウィジェットに追加します

それから家で.DART、新しいパッケージをインポートし、データモデルに提供されるいくつかのファイル：

インポート 'パッケージ：フラッター/マテリアル.dart ';インポート 'パッケージ：intl/intl.dart '; 'モデル/製品をインポートします.dart '; Import 'Model/Products_Repository.dart '; 

最後に、_buildgridcards（）を変更して製品情報を取得し、ファイルでこのデータを使用します。

// todo：カードのコレクションを作成（102）//このメソッド全体のリスト_buildgridcards（buildcontextコンテキスト） < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > 最終的なThemedataテーマ=テーマ.of（context）;最終numberformat formatter = numberformat.SimpleCurrent（ローカル：施設.localof（コンテキスト）.toString（））;返品製品.マップ（（製品） < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >）））.tolist（）; > 

気づいた ：コンピレーションと実行を起動する前に待ってください. 変更する修正が残っています.

テキストをフォーマットするには、テーマデータを使用します テーマ付き 値から BuildContext 現在.

テキストのフォーマットの詳細については、マテリアルデザインの指示のタイポグラフィに関する記事を参照してください. テーマからのフォーマットの詳細については、MDC-103を使用してこのプログラミングワークショップを続けてください：マテリアルデザインのテーマの使用（色、形状、標高、タイプ）.

また、build（）関数を変更して値を送信します BuildContext コンパイルを起動する前に_buildgridcards（）で：

// TODO：グリッドビュー（102）ボディを追加：グリッドビュー.count（crossaxiscount：2、パディング：const edgeinsts.すべて（16.0）、ChildAspectratio：8.0/9.0、子供：_buildgridcards（コンテキスト）//コードの変更）, 

ホットアプリケーションを再起動します.

ファイル間に垂直スペースを追加しないことに気付くかもしれません. 上部と下部に4つのマージンがあるので.

プロジェクトを記録します.

生成されたデータが表示されますが、画像は不要なスペースに囲まれています. デフォルトでは、画像はフィールドで描画されます boxfit 定義されています .スケーリングダウン（この場合）. この値をに置き換えます .彼女が不必要なスペースをズームインして削除できるようにwidth.

フィットフィールドを追加：boxfit値のように.FitWidth：

 // todo：ボックスサイズ（102）フィットを調整します：boxfit.FitWidth, 

当社の製品は、アプリケーションに完全に表示されています.

7. おめでとう !

当社のアプリケーションは、ユーザーが接続画面から製品が表示されるホーム画面に移動できるようにする基本的な操作を提供します. 数行のコードは、より高いアプリケーションバー（タイトルと3つのボタンを備えた）とファイル（アプリケーションのコンテンツを表示するため）を追加するのに十分でした。. 取得したホーム画面はシンプルで機能的で、基本的な構造と使用可能なコンテンツを持っています.

MDC-102アプリケーションの完成バージョンは、103-Starter_and_102-Complete Branchで入手できます .

ページ上のバージョンをこのブランチのアプリケーションと比較できます.

次の手順

アプリケーションバー、シート、テキストフィールド、およびページの上部にあるボタンを使用すると、マテリアルフラッターライブラリの4つの主要なコンポーネントを使用しました。. 詳細については、材料コンポーネントのカタログを参照してください.

アプリケーションが完全に機能していても、ブランドアイデンティティや特定の視点を反映していません. MDC-103ワークショップ：マテリアルデザインのテーマ（色、形状、標高、タイプ）の使用では、これらのコンポーネントのスタイルをパーソナライズして、モダンでダイナミックなブランドを表現します。.

このプログラミングワークショップの実現は、私に時間と合理的な努力を求めました

完全に同意する

同意することも同意しません

まったく同意しません

材料コンポーネントを使い続けたいです

完全に同意する

同意することも同意しません

まったく同意しません

特に示されない限り、このページのコンテンツはクリエイティブコモンズの割り当て4ライセンスによって管理されます.0、およびコードサンプルはApache2ライセンスによって管理されます.0. 詳細については、Google開発者サイトのルールを参照してください. JavaはOracleおよび/またはその関連会社の登録商標です.