【Flutter】Cardの使い方｜高さ・角丸・余白・背景色の設定

「影のあるContainerを実装したい」

こんな時に便利なのが Card ウィジェットです。

Cardを使用することで影のあるレイアウトボックスを実装できます。CardはContainerのように任意のウィジェットの余白や背景色などを設定できます。

それではCardの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

Cardの基本的な使い方について解説します。

Cardのchildプロパティに影を付けたい任意のウィジェットを渡します。

Card(
  child: Text('Hello World'),
),

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Card(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 40),
          ),
        ),
      ),
    );
  }
}

カスタマイズ方法

続いてCardのカスタマイズ方法について解説します。

背景色

colorプロパティで背景色を設定できます。

Card(
  color: Colors.amber,
  child: MyWidget(),
),

影の高さ

影の高さはelevationプロパティで設定できます。

Card(
  elevation: 10,
  child: MyWidget(),
),

角丸

Cardを角丸にするにはshapeプロパティで次のように設定できます。

角丸の丸みはRadius.circularの引数に数値を渡して調整します。

Card(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: MyWidget(),
),

外側の余白

Cardの外側の余白はmarginプロパティで設定できます。

marginプロパティの引数にEdgeInsetsを渡して余白を設定できます。

Card(
  margin: EdgeInsets.symmetric(horizontal: 50),
  child: MyWidget(),
),

内側の余白

Cardの外側の余白を設定するにはPaddingウィジェットを使用します。

PaddingのchildプロパティにCardを渡し、paddingプロパティの引数にEdgeInsetsウィジェットを渡して余白を設定します。

Card(
  child: Padding(
    padding: EdgeInsets.all(40.0),
    child: MyWidget(),
  ),
),

高さ・横幅

Cardの高さまたは横幅を設定するにはSizedBoxウィジェットを使用します。

SizedBoxのchildプロパティにCardを渡し、heightプロパティで高さ、widthプロパティで横幅を設定できます。

SizedBox(
  height: 100,
  width: 300,
  child: Card(
    child: MyWidget(),
  ),
),

まとめ

今回はCardの基本的な使い方とカスタマイズ方法について解説しました。

Cardを使用することで影のあるレイアウトボックスを実装できます。CardはContainerのように任意のウィジェットの余白や背景色などを設定できるのでぜひ使ってみてください。