Flutterのチュートリアルを学んでみた(13)

Cardでおしゃれな表示枠を作ろう！ 🎨

Cardって何？ 🤔

名刺やクレジットカードのような見た目のウィジェットを作れます！

• 影がついてる
• 角が丸い
• 背景が白い

こんな感じの見た目がマテリアルデザインの特徴です！

基本の使い方 📝

シンプルなカード

Card(
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('はじめてのCard'),
  ),
)

余白をつけたカード

Card(
  margin: EdgeInsets.all(16),  // カードの外側の余白
  child: Container(
    padding: EdgeInsets.all(16),  // カードの中の余白
    child: Text('余白のあるCard'),
  ),
)

カードをおしゃれにする 🎨

影の濃さを変える

Card(
  elevation: 8.0,  // 影を濃くする
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('影の濃いCard'),
  ),
)

角の丸さを変える

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),  // もっと丸くする
  ),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('角が丸いCard'),
  ),
)

実践例：プロフィールカード 👤

Card(
  margin: EdgeInsets.all(16),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        CircleAvatar(
          radius: 50,
          backgroundImage: AssetImage('assets/profile.jpg'),
        ),
        SizedBox(height: 16),
        Text(
          'Flutter太郎',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text('Flutterが大好きなプログラマー'),
      ],
    ),
  ),
)

やってみよう！ 💪

1. シンプルなメッセージカード

Card(
  child: ListTile(
    leading: Icon(Icons.message),
    title: Text('新しいメッセージ'),
    subtitle: Text('こんにちは！'),
  ),
)

1. 写真付きのニュースカード

Card(
  child: Column(
    children: [
      Image.asset('news.jpg'),
      Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'ビッグニュース！',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('これは大変興味深いニュースです...'),
          ],
        ),
      ),
    ],
  ),
)

こんな使い方もできます！ 🌟

タップ可能なカード

InkWell(
  onTap: () {
    print('カードがタップされました！');
  },
  child: Card(
    child: Container(
      padding: EdgeInsets.all(16),
      child: Text('タップしてね'),
    ),
  ),
)

色付きのカード

Card(
  color: Colors.blue[100],  // 薄い青色
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('色付きのCard'),
  ),
)

チャレンジしてみよう！ 🎯

1. 商品カードを作る

Card(
  child: Column(
    children: [
      Image.asset('product.jpg'),
      Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text('素敵な商品', style: TextStyle(fontSize: 20)),
            Text('¥1,000'),
            ElevatedButton(
              onPressed: () {},
              child: Text('購入する'),
            ),
          ],
        ),
      ),
    ],
  ),
)

1. SNSの投稿カードを作る
2. レストランのメニューカードを作る

困ったときは？ 🆘

• カードが見えない
  → marginとpaddingを確認
• 影が濃すぎる/薄すぎる
  → elevationの値を調整
• レイアウトが崩れる
  → Containerでサイズを調整

大切なポイント ⭐️

1. Cardは必ずchildが必要
2. marginは外側の余白
3. paddingは内側の余白
4. elevationで影の濃さを調整

Cardを使えば、プロフェッショナルな見た目のアプリが作れます！