Flutterラボの

プレミアム会員になる

【Flutter入門】複数のWidgetを重ねるためのWidget『Stack』について

2020.09.13

Flutter初心者がアプリ開発学習で挫折しないために、基本的なWidgetについて簡単かつ実践的に解説する記事を更新しています。
記事の最後にFlutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。

Stack

基本的にはWidget同士を重ねることはできませんが、Stackを使うと可能になります。

よく使う状況として1つ挙げると、読み込み中のときに円形で回っているWidget(CircularProgressIndicator)を表示するときです。

画像1

コード

Stack(
 alignment: Alignment.center, // 重ねる位置を指定
 children: [
   Container(
     margin: EdgeInsets.all(10.0),
     color: Colors.green,
     height: double.infinity,
   ),
   CircularProgressIndicator(),
 ],
)

■ children
重ねたいWidgetを指定
後に指定したものが前面に表示される

■ alignment
重ねる位置を指定

プログラミングで副業!アプリ開発学習 | ONthe UMEDA 企業のファン獲得から個人の生活品質向上まで、ますます需要の高まる"アプリ"の開発を、ご自身のペースで学べる教材・学習サポー onthe.osaka


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt