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

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

## Cardって何？ 🤔

名刺やクレジットカードのような見た目のウィジェットを作れます！
- 影がついてる
- 角が丸い
- 背景が白い

こんな感じの見た目がマテリアルデザインの特徴です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/db793a31-883e-d26f-bec9-668331697238.png)


## 基本の使い方 📝

### シンプルなカード
```dart
Card(
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('はじめてのCard'),
  ),
)
```

### 余白をつけたカード
```dart
Card(
  margin: EdgeInsets.all(16),  // カードの外側の余白
  child: Container(
    padding: EdgeInsets.all(16),  // カードの中の余白
    child: Text('余白のあるCard'),
  ),
)
```

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

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

### 角の丸さを変える
```dart
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),  // もっと丸くする
  ),
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('角が丸いCard'),
  ),
)
```

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

```dart
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. シンプルなメッセージカード
```dart
Card(
  child: ListTile(
    leading: Icon(Icons.message),
    title: Text('新しいメッセージ'),
    subtitle: Text('こんにちは！'),
  ),
)
```

2. 写真付きのニュースカード
```dart
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('これは大変興味深いニュースです...'),
          ],
        ),
      ),
    ],
  ),
)
```

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

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

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

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

1. 商品カードを作る
```dart
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('購入する'),
            ),
          ],
        ),
      ),
    ],
  ),
)
```

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

## 困ったときは？ 🆘

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

## 大切なポイント ⭐️

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

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