Sizing the Stopwatch UI with AspectRatio

Notes

We will use a Stack to place all the (upcoming) UI elements within the same drawing area.

For now, this will contain the ElapsedTimeText widget, along with a square Container that we will use as a reference for learning about matrix transforms.

We don't want to set the width and height explicitly. Instead, we should let the layout engine set the constraints that will determine the size of the stopwatch UI.

But we want to specify a fixed proportion between width and height. AspectRatio is great for that, and since we want a square, we can pass a value of 1.0:

AspectRatio(
  aspectRatio: 1.0,
  child: Stopwatch(),
)


Complete and Continue  
Discussion

0 comments