Flutter – Aspect Ratio Widget

These days I studies flutter widgets a lot. From these studies, I would like to share you one thing – this is the importance of aspect ratio and how to use this widget.

Care about proportions more than exact dimensions?

When laying out your app, you often don’t care about the exact dimensions of which it will take. But you do care about the aspect ratio. You want the widget to be this wide irrespective of the actual dimensions or you want it to be slim or exactly square. Flutter solves this by providing the Aspect Ratio widget.

AspectRatio()

you give it an AspectRatio, a child, and, well , that’s it.

AspectRatio(
 aspectRatio: 3 / 2,
child:  MyWidget(),
)

Aspect ratio is the ratio between the width and height of a box. It’s often written as a fraction, like 3/2, as in three parts of width to two parts of height. But let’s not kid ourselves – it’s really just a double: 3 over 2 is just 3 divided by 2, which is 1.5 – the same thing.

AspectRatio(
 aspectRatio: 1.5,
child:  MyWidget(),
)

But don’t worry! Dart is smart enough to do the computation for you during compilation. So it’s okay and more readable to provide the aspect ratio as a fraction.

And one more thing – make sure you actually let the AspectRatio widget size it’s child. If you put AspectRatio into something like Expanded, then that will be forced by it’s parent to expand.

Expanded(
 child: AspectRatio(
  aspectRatio: 3 / 2,
  child: MyWidget(),
 ),
)

Tightly fitted widgets like Expanded don’t give their children a choice- harsh. If this happens to you, just put something like Align between the Expanded and the AspectRatio.

Expanded(
 child: Align(
 alignment: Alignment.bottomCenter,
  child: AspectRatio(
   aspectRatio: 3 / 2,
   child: MyWidget(),
  ),
 ),
)

Align will be forced by Expanded to fill the area. But it will let it’s child assume it’s own proportions.

Hope you enjoyed the article!

By Ami