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

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

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

方法

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

そして、指定したBoxDecorationの引数「boxShdow」に「BoxShadow」を設定します。

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

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey, //色
                    spreadRadius: 5, 
                    blurRadius: 5, 
                    offset: Offset(1, 1),
                  ),
                ],
                color: Colors.white,
              ),
              width: 250,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }