[Flutter]Card(カード)の背景(background)にグラデーション(gradient)を設定するには？

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

Cardの背景にグラデーションを設定する方法を紹介します。

方法
使用例

方法

Cardの背景にグラデーションを設定するには、Containerを使います。

まず、Card内に表示するウェジェットをContainerでラップします。

次に、Containerウェジェットの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「gradient」にグラデーションを設定します。

Card(
  child: Container(
    decoration: BoxDecoration(
      gradient: /*グラデーション*/,
    ),
    child:Widget(),
  ),
),

これでCardの背景にグラデーションを設定できます。

gradientに指定できるグラデーションは次の３つです。

LinearGradient : 直線的なグラデーション
RadialGradient : 放射状のグラデーション
SweepGradient : 中心から一周するグラデーション

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: Container(
            decoration: BoxDecoration(
              gradient: RadialGradient(
                colors: [
                  Colors.yellow,
                  Colors.green,
                  Colors.blue,
                ],
                radius: 4,
              ),
            ),
            child: ListTile(
              title: Text('Flutter'),
            ),
          ),
        ),
      ),
    );
  }