【日本語版】【Flutter】Widget of the Week – #35 Spacer【要約】

動画

要約

  • RowやColumnにはchildrenの間隔を制御するmainAxisAlignmentプロパティが用意されており、均等な間隔であれば指定できる
  • もし均等ではなく、自由にカスタマイズしたいのであればSpacerを使おう
  • Spacerを使えば、複雑なレイアウトでも簡単に実現できる。

内容

Row widgetとColumn widgetは、mainAxisAlignmentを指定することでchildrenの間隔を均等にできます。
(参考:MainAxisAlignment – Dart API – Flutter API
 

mainAxisAlignmentには、spaceAround、spaceBetween、spaceEvenlyを指定できます。
 

spaceAroundを指定すると、childの間に均等にスペースが与えられる。
最初と最後には、「child間のスペースの半分のスペース」が与えられる。
spaceBetweenを指定すると、child間に均等にスペースを作れる。
最初と最後にはスペース無し。
spaceEvenlyを指定すると、最初と最後も含めて全て均等にスペースが与えられる。

これらを使えば、間隔を均等にすることはできますが、もっと自由に間隔をカスタマイズしたい場合はSpacer widgetを使いましょう。

使い方は簡単です。
 

Spacerのインスタンスを他のwidgetの間に追加するだけで、
スペースが確保されます。

Spacerはflex値を指定することで自由に間隔をカスタマイズできます。
 

最初のSpacerのflexに2を指定。
(未指定の場合はflex = 1として計算される)
スペース幅が2:1で確保される。
flexを1:3:9で指定すれば、
スペースも1:3:9で広がる

まとめ

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

Spacerを使えば、RowやColumnのchildrenの間隔を自由に調整できます。

使い方も非常にシンプルで、かなり自由にカスタマイズできるので、使い勝手はとても良いです。

■ 次の記事はこちら
#36 – InheritedWidget

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