【日本語版】【Flutter】Widget of the Week – #38 AspectRatio【要約】

動画

要約

  • AspectRatioを使うことでwidgetのアスペクト比を一定に保つことができる

内容

アプリのレイアウトを設計しているとき、アスペクト比が気になることは多いでしょう。

実際のサイズは変わったとしてもアスペクト比は保ちたい、ということはよくあります。

Flutterでは、AspectRatio widgetを使うことでwidgetのアスペクト比を一定に保つことができます。

使い方は簡単で、アスペクト比を指定したいwidgetをAspectRatio widgetでラップして、アスペクト比を指定するだけです。
 

childにはどんなwidgetでも指定できます。Containerでも画像でもwidgetのツリーでも問題なく動くでしょう。

また、アスペクト比は分数の形で指定します。3/2はすなわち、3:2のアスペクト比を意味します。

分数(3/2)ではなく、少数の形(1.5)で指定しても問題なく動きます。

しかし、少数だと可読性が悪いので、分数で指定するのが良いでしょう。

分数で書けば、アスペクト比が何対何なのか一目瞭然です。
 

注意点が1つあります。

Expandedのような強制的にサイズを変えるwidgetでAspectRatioをラップするとアスペクト比は無視されます。
 

MyWidgetはアスペクト比を無視して広がる(Expanded)

その場合は、Alignのような他のwidgetをExpandedとAspectRatioの間に入れるとうまく動きますので、覚えておくといいでしょう。
 

ExpandedとAspectRatioの間にAlignを挟み込むと、
アスペクト比が保たれる

まとめ

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

統一感のあるデザインを実現するためにアスペクト比を一定に保つことは重要です。

AspectRatioを使うことで簡単にwidgetのアスペクト比を一定に保つことができます。

■ 次の記事はこちら
#39 – LimitedBox

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