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

5. Add a card in a grid

アプリに構造ができてきたので、コンテンツをカードに配置して整理しましょう。

カード(Card)ウィジェットは、一つのコンテントに関する内容とアクションを表示する独立した要素です。 これらは、類似したコンテンツをコレクションとして提示するための柔軟な方法です。

カードの詳細については、マテリアルガイドラインのカードの記事をご覧ください。

カードウィジェットの詳細については、Flutterでのレイアウトの構築をご覧ください。


(1)Add a GridView

上部のアプリバーの下にカードを1枚追加することから始めましょう。 カードウィジェットだけでは、それを表示できる場所に配置するのに十分な情報がないため、GridViewウィジェットにカプセル化する必要があります。

ScaffoldのbodyパラメータのCenterウィジェットをGridViewウィジェットに置き換えます。

body: GridView.count(
  crossAxisCount: 2,
  padding: EdgeInsets.all(16.0),