[Flutter]Containerの影を下にだけつける方法

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

Containerの影を下にだけつける方法を紹介します。

方法

Containerの影を下にだけ付けるには、まず「decoration」に「BoxDecoration」を指定します。

次に、BoxDecorationの引数「boxShadow」に「[BoxShadow()]」を指定します。

そして、BoxShadowの引数「offset」に「Offset(0, /*正の値*/)」を設定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        offset: Offset(0, /*正の値*/),
      ),
    ],
  ),
),

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 5),
        color: Colors.grey,
      ),
    ],
    color: Colors.blue,
  ),
  height: 100,
  width: 100,
),