[Flutter] BoxShadowについて

勉強の記録を残していく記事です。
Flutter を始めたばかりの人でもわかりやすい記事にするために、動画や画像を使って解説しています。

BoxShadow は、Widget の影をデザインするときに使います。
Widget に影をつけると立体的に見せることができます。

  boxShadow: [
               BoxShadow(
                 color: Colors.black26,
                 offset: Offset(10, 10),
                 blurRadius: 10.0,
                 spreadRadius: 1.0,
               ),
             ],

４つのプロパティを持ち、

color: 影の色を指定します。
Color について詳しく知りたい方は、Color についての記事を見てみてください。

offset: オフセット、影の位置を指定します。上のコード例では、offset が、Offset(10, 10) と指定されています。

offset のデフォルト値は、Offset(0, 0) です。
これは、Widget と影が、同じ位置で重なっていることを意味します。
（下図）

Offset(10, 10) は、X軸方向に 10px、Y軸方向に 10px、デフォルトの位置から、影を移動させることを意味します。

blurRadius: ブラーラディウス、blur は、かすんで見えるものという意味で、
影のぼかし具合を調節するプロパティです。

spreadRadius: スプレッドラディウス、spread は、広がりという意味で、
影の広がり具合を調節するプロパティです。

下のGIFを見ると、この２つのプロパティの働きがわかると思います。

この記事の最初に載せたコード例を見ると、boxShadow プロパティには、
リスト（ [  ] ）が使われています。
なので、Widget につける影をいくつか重ねて表示することも可能です。

   boxShadow: [
               BoxShadow(
                 color: Colors.red,
                 offset: Offset(10, 0),
                 blurRadius: 10,
                 spreadRadius: 30,
               ),
               BoxShadow(
                 color: Colors.yellow,
                 offset: Offset(0, 10),
                 blurRadius: 10,
                 spreadRadius: 20,
               ),
               BoxShadow(
                 color: Colors.greenAccent,
                 offset: Offset(-10, 0),
                 blurRadius: 10,
                 spreadRadius: 10,
               ),
               BoxShadow(
                 color: Colors.orange,
                 offset: Offset(0, -10),
                 blurRadius: 10,
                 spreadRadius: 5,
               ),
             ],