[Flutter]Containerの「BoxShadow」の使い方

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

ContainerのBoxShadowの使い方を紹介します。

使い方

BoxShadowは、引数なしで使うことが出来ます。

ですが、次のような引数を使うことで、影の設定をすることが出来ます。

• color : 影の色
• offset : 影の位置
• blurRadius : ぼやけ具合
• spreadRadius : 影の大きさ

color

引数「color」では、影の色を設定することが出来ます。

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

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.red,
      ),
    ],
    color: Colors.white
  ),
  height: 100,
  width: 100,
)

offset

引数「offset」は、影の位置を設定します。

影の位置は、Offset(dx, dy)のように設定します。

dxに正の値を指定すると右、負の値を指定すると左に影が移動します。

dyに正の値を指定すると下、負の値を指定すると上に影が移動します。

dxとdyに値を指定したOffsetを引数「offset」に指定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
       BoxShadow(
           offset: Offset(/*dx*/, /*dy*/),
       ),
     ], 
   ),
),

以下は、使用例です。

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

blurRadius

引数「blurRadius」は、ぼやけ具合を設定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        blurRadius: /*ぼやけ具合*/,
      ),
    ],
  ),
),

以下は、使用例です。

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

spreadRadius

spreadRadiusでは、影の大きさを設定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        spreadRadius: /*影の大きさ*/,
      ),
    ],
  ),
),

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        spreadRadius: ５0,
      ),
    ],
    color: Colors.white,
  ),
  height: 100,
  width: 100,
),

まとめ

BoxShadowは、引数なしで使うことが出来ます。

そして、次のような引数を使うことで、影の設定をすることが出来ます。

• color : 影の色
• offset : 影の位置
• blurRadius : ぼやけ具合
• spreadRadius : 影の大きさ