[Flutter]Containerの上に影を表示するには？

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

Containerの上に影を表示する方法を紹介します。

方法

Containerの上に影を表示するには、まず引数「decoration」に「BoxDecoration」を指定します。

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

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow()
    ],
  ),
),

最後に、BoxShadowの引数「offset」に「Offset(0 , /*負の値*/)」を指定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
          offset: Offset(0, /*マイナスの値*/), 
       )
    ],
  ),
),

これで影をContainerの上に表示することが出来ます。

以下は、使用例です。

使用例

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        offset: Offset(0, -7),
        color: Colors.grey,
        blurRadius: 2,
      )
    ],
    color: Colors.white,
  ),
  height: 100,
  width: 300,
)