[Flutter]Containerの影を内側につけるには？

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

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

方法

Containerの影を内側につけるには、まず引数「decoration」に「BoxDecoration」を指定します。

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

この「BoxShadow」には影の色を設定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: /*影の色*/,
      ),
    ],
  ),
),

そして、もう１つBoxShadowを引数「boxShadow」のリストに追加します。

新しく追加するBoxShadowには、引数「color」にContainerの背景色を指定します。

また、引数「spreadRadius」に負の値を指定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: /*影の色*/,
      ),
      BoxShadow(
        color: /*コンテナーの背景色*/,
        spreadRadius: /*負の値*/,
      ),
    ],
  ),
),

これでContainerの内側に影をつけることが出来ます。

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
      ),
      BoxShadow(
        color: Colors.white,
        spreadRadius: -12.0,
        blurRadius: 12.0,
      ),
    ],
  ),
  height: 100,
  width: 100,
),