[Flutter]Card(カード)を上から被せて(overlay)表示するには？

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

Cardを他のウェジェットの上に被せて表示する方法を紹介します。

方法
使用例

方法

Cardを上から被せて表示するには、Stackウェジェットを使います。

具体的には、Stackの引数「children」に下になるウェジェット、被せるカードを指定します。

Stack(
  children: [
    UnderWidget(), //下になるウェジェット
    Card(),
  ],
),

これでCardを上から被せることが出来ます。

もし、Cardや下に表示するウェジェットの位置を調整したい場合は、Positionedウェジェットを使います。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          children: [
            Positioned(
              child: Column(
                children: [
                  Container(
                    height: 200,
                    width: 400,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 100,
                    width: 400,
                    color: Colors.green,
                  ),
                ],
              ),
            ),
            Positioned(
              top: 110,
              left: 45,
              child: Card(
                child: Container(
                  height: 100,
                  width: 300,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }