[Flutter]CardっぽいContainerを作るには？

Flutter

2021.11.01

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

CardっぽいContainerを作る方法を紹介します。

方法

CardっぽいContainerを作るには、まず「Container」の引数「decoration」にBoxDecorationを指定します。

次に、指定したBoxDecorationの引数「boxShadow」で影の設定をします。

また、引数「color」にColors.whiteを指定します。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.7), //影の色
        spreadRadius: 0.1, //影の大きさ
        offset: Offset(0.4, 0.5), //影の位置
      ),
    ],
    color: Colors.white,
  ),
),

そして、BoxDecorationの引数「borderRadius」に角丸の設定をします。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.7),
        spreadRadius: 0.1,
        offset: Offset(0.4, 0.5),
      ),
    ],
    borderRadius: BorderRadius.circular(3), //丸みは３
    color: Colors.white,
  ),
  width: 300,
  height: 100,
),

最後に、引数「width」と引数「height」でサイズを設定すればCardっぽいContainerの完成です。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.7),
                    spreadRadius: 0.1,
                    offset: Offset(0.4, 0.5),
                  ),
                ],
                borderRadius: BorderRadius.circular(3),
                color: Colors.white,
              ),
              width: 300,
              height: 100,
              child: Text('Container'),
            ),
            SizedBox(
              height: 5,
            ),
            Card(
              child: Container(
                width: 300,
                height: 100,
                child: Text('Card'),
              ),
            ),
          ],
        ),
      ),
    );
  }