【Flutter】Card|影のあるカードパネルをつくる

今回はCard の基本的な使い方を紹介します。

Card を使えば指定したWidgetを影付きのカードパネル上で表示できます。

\ 世界最大級のオンライン学習サービス /

目次

Cardの使い方

Card(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 50),
  ),
),

Card のパネル上で表示したいWidgetをchild で指定します。

内側の余白を調整

Card(
  child: Padding(
    padding: EdgeInsets.all(12.0),
    child: Text(
      'Hello World',
      style: TextStyle(fontSize: 40),
    ),
  ),
),

Cardの内部余白を調整するにはPadding を使用します。

外側の余白を調整

Card(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 40),
  ),
  margin: EdgeInsets.all(30),
),

外部余白を調整するにはmargin を使用します。

z軸に浮かぶ高さを指定

Card(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 40),
  ),
  elevation: 10,
),

elevationでz軸に浮かぶ高さを指定できます。

影の色を指定

Card(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 40),
  ),
  elevation: 10,
  shadowColor: Colors.purple,
),

shadowColor で影の色を指定します。

サイズを変更

SizedBox(
  width: 200,
  height: 150,
  child: Card(elevation: 10),
),

Cardのサイズを変更するには SizedBox を使用します。

一緒に読みたい

参考

  • URLをコピーしました!
目次