【日本語版】【Flutter】Widget of the Week – #20 FittedBox【要約】

動画

https://www.youtube.com/watch?v=T4Uehk3_wlY

要約

  • widgetが親のwidgetに収まりきらない場合はFittedBoxを使おう
  • FittedBoxを使えば、幅や高さを細かく指定することなく、子widgetをピッタリ収めることができる

内容

Flutterでは多くのwidgetがBoxの形をしています。

開発者はそれらを自由に配置したり、順番に並べたり、入れ子(widgetの中にwidgetを配置すること)にしたりすることができます。

あなたがwidgetを入れ子にした場合、widgetが親widgetのサイズに収まりきらなかったらどうすればいいでしょうか?

そんなときのために、FlutterはFittedBoxを用意しています。
 

使い方は簡単です。

まず、子widgetを指定します。

その次に、子widgetをどのようにフィットさせるかを指定するBoxFitを指定して終わりです。
 

それだけで、子widgetは自動的に親widgetにフィットします。
 

BoxFitには、様々な種類があります。

fitWidth、fill、さらにnoneなどです。
 

さらに、余分なスペースがある場合は、alignmentを指定することもできます。
 

AlignmentをcenterLeftに指定して、子widgetを左寄せに。

FittedBoxの詳細については、Flutter.ioを参照してください。

BoxFitプロパティ

詳細は公式ドキュメント(英語)を参照

contain
親をはみ出さない範囲で最大の大きさまで拡大縮小する。対象の縦横比は変えない。

cover
親を埋めていない部分ができない範囲で最小の大きさまで拡大縮小する。対象の縦横比は変えない。

fill
対象の縦横比を変えて、親と同じ大きさにする。

fitHeight
親と高さが揃うように拡大、縮小する。対象の縦横比は変えない。

fitWidth
親と幅が揃うように拡大、縮小する。対象の縦横比は変えない。

none
何もしない。親からはみ出した部分は切り取られる(見えなくなる)。

scaleDown
親の中に収まるまで縮小する。すでに収まっている場合、拡大はしない。 縮小する場合はcontainと同じ動き。すでに収まっている場合はnoneと同じ動き。

関連記事

◆ BoxFit.coverのサンプルコード(NetworkImage内で利用)
 【Flutter】背景いっぱいに画像を表示する

◆ BoxFit.containのサンプルコード(Image内で利用)
 Flutter ちょっと Tips 〜要素サイズいっぱいに表示する〜

まとめ

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

FittedBoxを使うと、コードをシンプルに保つことができます。

Flutterはwidgetの入れ子が多くなりやすいので、状況に応じて活用すると良さそうです。

■ 次の記事はこちら
#21 – LayoutBuilder

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