【Flutter】Containerに影をつける

こんにちは。
今回は、Containerに影をつける方法を紹介します。

方法

まず、BoxDecorationのプロパティにboxShadowを設定します。

次に、boxShadowのプロパティを設定します。

• color: 影の色の指定
• offset: オフセット、影の位置の指定
• offset のデフォルト値は、Offset(0, 0)※Widgetと影が、同じ位置で重なっている
• blurRadius: 影のぼかし具合を調節
• spreadRadius:影の広がり具合を調節

使用例

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 70,
            decoration: const BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  spreadRadius: 10,
                  blurRadius: 20,
                  offset: Offset(1, 1),
                ),
              ],
              color: Colors.white,
            ),
          ),
        ),
    );
  }
}

実行例

最後に

ここまで読んでいただき、ありがとうございました！
いいねしてくれたら、スキップして喜びます