2020/10/31 MDC-102 Flutter:Material Structure and Layout (Flutter)の訳パート2

 

1. Introduction

マテリアルコンポーネント(MDC)は、開発者がマテリアルデザインを実装するのに役立ちます。 GoogleのエンジニアとUXデザイナーのチームによって作成されたMDCは、美しく機能的なUIコンポーネントを多数備えており、Android、iOS、ウェブ、Flutter.material.io / developで利用できます。


codelab MDC-101では、2つのマテリアルコンポーネントを使用してログインページを作成しました。テキストフィールドとインクの波紋のあるボタンです。 それでは、ナビゲーション、構造、およびデータを追加して、この基盤を拡張してみましょう。


What you’ll build

このコードラボでは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリのホーム画面を作成します。

含まれるもの:

トップアプリバー
製品でいっぱいのグリッドリスト



MDC components in this codelab

  • Top app bar
  • Grids
  • Cards

4. Add a top app bar

現在、「Next」ボタンをクリックすると、「I did it!」というホーム画面が表示されます。 それは素晴らしいことです!

しかし、今では、ユーザーは実行するアクションや、アプリ内のどこにいるかについての感覚がありません。 それを助けるために、ナビゲーションを追加する時が来ました。…