[Flutter]ウェジェット(Widget)を重ねて表示する方法

重ねて表示するレイアウト

Flutterでは、Stackウェジェットを使うことで、複数のウェジェットを重ねて表示することが出来ます。

具体的には、Stackウェジェットの「children」プロパティで、重ねるウェジェットを指定します。

Stack(
        children: [
          Container(color: Colors.black,width: 50, height: 50,),
          Container(color: Colors.blue,width: 100, height: 100,),
          Container(color: Colors.red,width: 150, height: 150,),
        ],
      )

後に記述されたウェジェットほど、前面に表示されます。

まとめ

ウェジェットを重ねて表示するには、Stackウェジェットを使います。

オススメの記事

[Flutter]「Columnウジェット」の使い方

2021.8.15 Columnウェジェットの使い方を解説します。

www.choge-blog.com

2021.08.15

[Flutter]「ウジェット（Widget）」とは何？

2021.8.14 Flutterのウェジェットとは何なのでしょうか？

www.choge-blog.com

2021.08.14

[Flutter]「Navigator.pushメソッド」の使い方

2021.8.16 Flutterのpushメソッドを解説します。

www.choge-blog.com

2021.08.16