【日本語版】【Flutter】Widget of the Week – #26 Positioned【要約】

動画

要約

  • Stackのchildrenの位置はPositionedを使って指定しよう
  • top, bottom, left, right, hight, widthを数値で指定することができる
  • Positioned.fillを使うことで、Stackのスペースを埋めるように配置することもできる

内容

Stackは素晴らしいwidgetです。

widgetを思いのままに互いに組み合わせたり上に重ねたりすることができます。
 

では、Stackの中でwidgetの配置を決めるにはどうすればいいでしょうか?

いくつか方法はありますが、Positioned widgetを使ってみましょう(参考:Align widgetでも可能)。

Positionedはその名前の通り、Position(位置)を決めるためのwidgetです。

使い方は簡単です。まず、widgetをStackの中でラップします。
 

あとは、top、bottom、left、right、height、widthの値を指定するだけです。
 

topとleftを指定した例
bottomとrightを指定してFlutterロゴを右下に配置
heightとwidthも指定できます

Positionedの使い方をもうひとつ紹介しましょう。

Positioned.fillを使った方法です。

Positioned.fillを使えばStackのスペースを埋めるようにwidgetを配置することもできます。
 

Flutterのロゴを親widgetいっぱいに広げて配置

まとめ

Widget of the Weekの#26 Positionedの日本語翻訳版でした。

Positionedを使って、Stackのchildrenを自由自在に配置しましょう。

Stackとセットで覚えておくと良さそうです。

■ 次の記事はこちら
#27 – AnimatedBuilder

■Widget of the Week まとめ
Widget of the Week 一覧