【Flutter】Cardの基本的な使い方

Card使い方
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • Card Widgetの基本的な使い方が知りたい

Card Widgetを使えば、スタイリッシュなパネルを使用できます。

\ Widgetの扱い方が不安な方はこちら! /

スポンサーリンク

Cardの基本となるプロパティ

child

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

childプロパティで、Cardに表示したいWIdgetを指定します。

child

color

Card(
  color: Colors.lightBlueAccent,
  child: Text(
    'Hello World',
    style: TextStyle(
    fontSize: 30,
    ),
  ),
),

colorプロパティで、Cardに背景色を指定します。

color

margin

Card(
  margin: EdgeInsets.symmetric(vertical: 20),
  color: Colors.lightBlueAccent,
  child: Text(
    'Hello World',
    style: TextStyle(
    fontSize: 30,
    ),
  ),
),

marginプロパティで、Cardの枠の外側に余白を作ります。また、引数にEdgeInsetsを使用します。

>>【Flutter】marginプロパティの使い方|EdgeInsets

marginあり
margin あり
marginなし
margin なし

elevation

Card(
  elevation: 30,
  color: Colors.lightBlueAccent,
  child: Text(
    'Hello World',
    style: TextStyle(
    fontSize: 30,
    ),
  ),
),

elevationプロパティで、Cardの影のサイズを調整します。また、引数にdoubleを使用します。

elevation

shadowColor

Card(
  elevation: 30,
  shadowColor: Colors.pink,

  color: Colors.lightBlueAccent,
  child: Text(
    'Hello World',
    style: TextStyle(
    fontSize: 30,
    ),
  ),
),

shadowColorプロパティで、影の色を指定します。

shadowColor
タイトルとURLをコピーしました