[Flutter]Card(カード)を角丸(rounded border)にするには？

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

Cardを角丸にする方法を紹介します。

方法
使用例
まとめ

方法

Cardを角丸にするには、RoundedRectangleBorderを使います。

まず、Cardの引数「shape」にRoundedRectangleBorderを指定します。

そして、RoundedRectangleBorderの引数「borderRadius」に角の丸みを設定します。

角の丸みは、BorderRadius.circular()を使って設定します。

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(/*数値*/),
  ),
),

BoderRadius.circularに指定した数値が角の丸みとなります。

これでCardを角丸にすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          child: ListTile(
            title: Text(
              'Flutter',
              style: TextStyle(color: Colors.white),
            ),
          ),
          color: Colors.blue,
        ),
      ),
    );
  }