【日本語版】【Flutter】Widget of the Week – #33 Flexible【要約】

動画

要約

  • 与えられたサイズに応じて柔軟にwidgetのサイズを変えたい場合はFlexible widgetを使おう
  • flex値を指定することで、widget毎の幅を調整することもできる。
    (3つのwidgetを2:3:1の幅で配置するなど)
  • fitプロパティを使うことで、スペースだけ確保してそのスペースの中で自由にwidgetの幅を指定することもできる。

内容

widgetのサイズが固定の場合、widgetの配置はとても簡単です。

しかし、widgetのサイズを親のサイズに応じて柔軟に変えたい場合はどうすればいいでしょうか?

あるいは、親のサイズが変わったときに、子widgetのサイズも合わせて変えたい場合、どうすればいいでしょうか?

そんなときは、Flexible widgetを使ってください。

使い方は簡単です。widgetをFlexibleでラップするだけです。
 

widgetをFlexibleでラップするだけ

その際、それぞれのwidgetにflex値を指定することもできます。

flex値に応じて、Flutterが実際のサイズを決定してくれます。
 

flexを2:3:1で指定
flexで指定した割合でwidgetが広がってくれる

また、fitプロパティにFlexFit.looseを指定することで、widgetのもとのサイズを優先することもできます。

補足:widgetに明示的に指定されたサイズがある場合、そのサイズを優先させることができる。
まず、flex値に応じたスペースが確保され、そのスペースを最大としてwidgetは自由に幅を取る。
fitプロパティに何も指定していない場合やFlexFit.tightを指定している場合、widgetは強制的にスペースを埋めるように広がる。

参考:ExpandedとFlexibleの違いについて – stack overflow
 

flexに2を指定して、fitにlooseを指定。
widgetのオリジナルのheightは100
一番上のContainerに注目。
flexに応じて確保されたスペースの中でオリジナルのサイズ(height:100)になっている。

また、あなたは固定幅をもつwidgetとFlexibleを組み合わせて使うこともできます。
 

Flexible以外のwidgetとも組み合わせて使える

まとめ

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

Flexibleを使うことで親のサイズに応じたサイズの調整をFlutterに任せることができます。

そのため、開発者はモバイル機器のサイズや状況を意識する必要がなくなり、シンプルな実装でいつでも最適なレイアウトを維持できるようになります。

■ 次の記事はこちら
#34 – MediaQuery

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