AspectRatio Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
AspectRatio Widget - Flutter Widget Guide By Flutter Agency
AspectRatio Widget - Flutter Widget Guide By Flutter Agency

In earlier, we have gone through PopupMenuButton Widget which is a popup menu with a text and image. so in this article, we will be discussing AspectRatio Widget.

What is AspectRatio Widget?

AspectRatio Widget tries to find the best size to maintain aspect ration while respecting it’s layout constraints. The AspectRatio Widget can be used to adjust the aspect ratio of widgets in your app.

The constructor of for it will look like below :

AspectRationwidget({
  Key key,
  @required double aspectRatio,
  Widget child,
});

AspectRatio has the parameter required parameter AspectRatio to specify the aspect ratio value of width/height. for example, the 3/2 aspect ration uses the value of 3.0/2.0.

The Process starts from setting the width to the maximum width of the constraints.if the maximum width is finite then the heigh is being calculated by width/aspectRatio Otherwise the height is set to a maximum height of the constraints and the width is set to height * aspectRatio.For example, if the height is less than the minimum height of the constraint then the height is set to a minimum value, and width is calculated based On height and aspectRatio.

The general rule is to check width before height and maximum value before minimum value. The final size may not meet the ratio requirement but it must meet layout constraints.

Example

Container(
     color: Colors.grey,
     alignment: Alignment.center,
     width: 200.0,
     height: 200.0,
     child: new AspectRatio(
     aspectRatio: 2,
     child: new Container(
     color: Colors.red,
     ),
 ),
)

In the above code, we have used aspectRatio value as 2. We will get output like below.

AspectRatio Widget - Flutter Widget Guide By Flutter Agency

AspectRatio Widget

When we make changes in an aspectRatio to 1/3 Our code Snippet will look like below :

Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 1 / 3,
          child: Container(
            color: Colors.orangeAccent,
          ),
        ),
      ),
    );

We will get output like below :

AspectRatio Widget

AspectRatio

When we make changes in aspectRatio to 4/3 we will have code snippet like below :

Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 4 / 3,
          child: Container(
            color: Colors.orangeAccent,
          ),
        ),
      ),
    );

We will get output like below :

AspectRatio Widget - Flutter Widget Guide By Flutter Agency

AspectRatio

Thanks for being with us on Flutter Journey !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply