[Flutter]Cardウェジェット(widget)の形(shape)を変えるには？

どうも、ちょげ(@chogetarou)です。

Cardウェジェットの形を変える方法を紹介します。

方法
使用例

方法

Cardウェジェットの形を変えるには、引数「shape」を使います。

具体的には、Cardウェジェットの引数「shape」にShapeBorderのサブクラスを指定します。

Card(
  shape: /*ShapeBorderのサブクラス*/,
  child: Widget(),
),

これでCardウェジェットの形を変えることが出来ます。

ShapeBorderのサブクラスで用意されているものは次の４つです。

RoundedRectangleBorder : 角丸の四角形
CircleBorder : 丸
ContinuousBorder : ただの四角形
BeveledRectangleBorder : 全てが直線で表現される四角形。角丸が特殊。

これらのインスタンスをCardの引数「shape」に指定します。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Flutter',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }