[Flutter]Column(カラム)に影(shadow)をつけるには？

[Flutter]Columnに影をつけるには？

Flutter

2021.11.30

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

Columnに影をつける方法を紹介します。

方法
使用例

方法

Columnに影をつけるには、Containerを使います。

まず、ContainerでColumnをラップします。

次に、Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「boxShadow」で影の設定をします。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        /*影の設定*/
      ),
    ],
  ),
  child: Column(
    children: [
      ・・・
    ],
  ),
),

これでColumnに影がつきます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                spreadRadius: 1,
                blurRadius: 3,
                color: Colors.grey,
                offset: Offset(18, 18),
              ),
            ],
          ),
          child: Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.white,
                ),
              ),
            ],
          ),
          padding: EdgeInsets.all(20),
        ),
      ),
    );
  }