How to use AspectRatio in Flutter

The AspectRatio widget in Flutter is a powerful tool that allows us to control the aspect ratio of a child widget. It's particularly useful when maintaining a width-to-height ratio for a widget, ensuring consistent proportions across different screen sizes and orientations.

Constructor and parameters

The AspectRatio widget provides a constructor with various parameters to customize its behavior and layout.

const AspectRatio({
  Key? key,
  required double aspectRatio,
  Widget? child
})

Let's take a closer look at each parameter and its purpose:

  • key: An optional parameter for identifying the widget, used for optimization and widget tree updates.

  • aspectRatio: Specifies the desired width-to-height ratio for the child widget.

  • child: The widget to which the aspect ratio will be applied, ensuring it maintains the specified proportions.

Importing necessary libraries

Before using the AspectRatio widget, make sure to import the required libraries in our Dart file:

import 'package:flutter/material.dart';

Basic syntax of AspectRatio widget

We can wrap the widget with AspectRatio widget to control its aspect ratio. It can be used in various layout scenarios, such as within a Column, Row, or any other layout widget.

AspectRatio(
  aspectRatio: desiredAspectRatio,
  child: YourChildWidget(),
)

Replace the desiredAspectRatio with the desired width-to-height ratio (e.g., 16 / 9 for a widescreen aspect ratio).

Applying AspectRatio to an image

Here's an example of how to use the AspectRatio widget to maintain a specific aspect ratio for an image:

Column(
  children: [
    AspectRatio(
      aspectRatio: 16 / 9,
      child: Image.network('https://fastly.picsum.photos/id/1074/400/400.jpg?hmac=eH9O4qH8NQGitzB3QaCq9jrbDZr7KQkaW_w17w0uoGM'),
    ),
    SizedBox(height: 20), // Adding spacing between the two AspectRatio widgets
    AspectRatio(
      aspectRatio: 4 / 3,
      child: Image.network('https://fastly.picsum.photos/id/1074/400/400.jpg?hmac=eH9O4qH8NQGitzB3QaCq9jrbDZr7KQkaW_w17w0uoGM'),
    ),
  ],
)

After running the above code, we can see the following output:

Code example

We get the following output by putting together the code explained above.

import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    const title = 'Educative AspectRatio Asnwer';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network('https://fastly.picsum.photos/id/1074/400/400.jpg?hmac=eH9O4qH8NQGitzB3QaCq9jrbDZr7KQkaW_w17w0uoGM'),
            ),
            SizedBox(height: 20), // Adding spacing between the two AspectRatio widgets
            AspectRatio(
              aspectRatio: 4 / 3,
              child: Image.network('https://fastly.picsum.photos/id/1074/400/400.jpg?hmac=eH9O4qH8NQGitzB3QaCq9jrbDZr7KQkaW_w17w0uoGM'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

The AspectRatio widget in Flutter is essential for maintaining consistent aspect ratios across various screen sizes and orientations. Following the steps outlined in this Answer, we can easily apply and customize aspect ratios for our widgets, ensuring a visually appealing and responsive user interface.

Additional resources

You can learn about other Flutter widgets from the following resources:

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved