技術記事

micomia株式会社の井上です。今回はStackについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Stackとは？

Stackとは、日本語だと何かを積み重ねている状態を指します。以前の記事でも紹介したように、ColumnやRowだと縦か横に並べることしかできませんが、Stackがあると同じ位置に複数の要素を重ねて表示させたりすることができます。

ですが、Stackを多用しすぎるとデザインが崩れやすくなってしまうので基本的にはColumnやRowを使用して実装することをお勧めします。ColumnとRowについては別の記事で詳しく解説しているのでそちらも是非ご覧ください。

Columnとは？｜初心者向けのFlutterFlow徹底解説Rowとは？｜初心者向けのFlutterFlow徹底解説

2. Stackの実装方法

StackはColumnやRowと同じようにWidgetとして実装できます。

Stackだけで何かできるわけではないので、子要素としてまずはButtonを追加してみます。

追加できました。ColumnやRowだと、ここから上下に動かすか、左右に動かすかしかできませんがStackは自由に動かすことができます。

動かす前に、まずStackのWidthとHeightを指定します。

右側のProperties Panelで今回はWidthとHeightをそれぞれ400に設定してみました。

この状態でButtonのWidgetを選択して動かしてみます。

このように、上下左右自由に動かすことができました。これがStackの特徴的な機能です。

基本的にはColumnとRowで位置を調節する方がデザイン崩れの恐れがなくて良いのですが、どうしてもColumnとRowだけでは実装できない場合であったり、いくつかのWidgetを重ねて実装してConditional Visibilityを使うなどで実装したい時にはもってこいのWidgetです。

3. なぜStackを多用するのは良くないのか

ここまで何度か「極力ColumnとRowで実装する方が良い」というようなことを言ってきましたが、なぜなのでしょうか？

実例をもとに、どんなデザイン崩れが起きるのか解説していきます。

例えば、このようにStackを使用してButtonの真横にTextがあるデザインを作ったとします。

このままの状態だと何ら問題ないのですが、アプリは絶対に同じサイズの端末で使用されるとは限りません。タブレット端末のサイズでこの画面を開いた状態を見てみると、

スマホサイズでは真ん中あたりにあったのにこのように左端に寄ってしまっています。

このようなデザインの崩れが頻発しがちなのでStackを多用することはあまりおすすめできません。

4. まとめ

今回はStackについて解説していきました。Stackは自由自在にWidgetを動かすことができて一見すごく便利なものに見えますが、それが結果的にデザインの崩れを引き起こしてしまうので、極力StackではなくColumnとRowで実装し、必要な時はうまく活用できるようにしましょう！

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら