動画
要約
- AspectRatioを使うことでwidgetのアスペクト比を一定に保つことができる
内容
アプリのレイアウトを設計しているとき、アスペクト比が気になることは多いでしょう。
実際のサイズは変わったとしてもアスペクト比は保ちたい、ということはよくあります。
Flutterでは、AspectRatio widgetを使うことでwidgetのアスペクト比を一定に保つことができます。
使い方は簡単で、アスペクト比を指定したいwidgetをAspectRatio widgetでラップして、アスペクト比を指定するだけです。
childにはどんなwidgetでも指定できます。Containerでも画像でもwidgetのツリーでも問題なく動くでしょう。
また、アスペクト比は分数の形で指定します。3/2はすなわち、3:2のアスペクト比を意味します。
分数（3/2）ではなく、少数の形（1.5）で指定しても問題なく動きます。
しかし、少数だと可読性が悪いので、分数で指定するのが良いでしょう。
分数で書けば、アスペクト比が何対何なのか一目瞭然です。
注意点が１つあります。
Expandedのような強制的にサイズを変えるwidgetでAspectRatioをラップするとアスペクト比は無視されます。
その場合は、Alignのような他のwidgetをExpandedとAspectRatioの間に入れるとうまく動きますので、覚えておくといいでしょう。
まとめ
Widget of the Weekの#38 AspectRatioの日本語翻訳版でした。
統一感のあるデザインを実現するためにアスペクト比を一定に保つことは重要です。
AspectRatioを使うことで簡単にwidgetのアスペクト比を一定に保つことができます。
■ 次の記事はこちら
#39 – LimitedBox
■Widget of the Week まとめ
Widget of the Week 一覧