What is an AspectRatio widget used for?

Overview

The

AspectRatio

Basic Usage

dartCopy
AspectRatio(
  aspectRatio: 16 / 9,  // Width:Height = 16:9
  child: Container(
    color: Colors.blue,
  ),
)

If the available width is

textCopy

320px

, the height will automatically be

textCopy

180px

(320 × 9/16).

Common Aspect Ratios

16 / 9

4 / 3

1 / 1

3 / 2

21 / 9

Video Player Example

dartCopy
AspectRatio(
  aspectRatio: 16 / 9,
  child: VideoPlayer(_videoController),
)

Image Card Example

dartCopy
Card(
  child: Column(
    children: [
      AspectRatio(
        aspectRatio: 16 / 9,
        child: Image.network(
          'https://example.com/image.jpg
          fit: BoxFit.cover,
        ),
      ),
      Padding(
        padding: EdgeInsets.all(8),
        child: Text('Image Title'),
      ),
    ],
  ),
)

Inside a List

dartCopy
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Image.network(items[index].imageUrl, fit: BoxFit.cover),
    );
  },
)

How It Works

1. textCopy

   AspectRatio

   receives the available width from its parent constraint
2. It calculates height = width / aspectRatio
3. If the calculated height exceeds available height, it uses height and calculates width instead

Use Case: Use

textCopy

AspectRatio

whenever you need a child widget to always maintain consistent proportions across different screen sizes — especially for media content like images and videos.