AspectRatio Widget

The AspectRatio widget sizes its child to a specific aspect ratio, which is the ratio of width to height.

Properties

• aspectRatio: number - The ratio of width to height
• child: Widget - The widget to size according to the aspect ratio

Common Aspect Ratios

1. 16:9 (1.78:1)

   • Widescreen video
   • Modern displays

   AspectRatio({
     aspectRatio: 1.78,
     child: VideoPlayer()
   })
   

2. 4:3 (1.33:1)

   • Traditional photos
   • Older displays

   AspectRatio({
     aspectRatio: 1.33,
     child: Image()
   })
   

3. 1:1 (1:1)

   • Square images
   • Profile pictures

   AspectRatio({
     aspectRatio: 1,
     child: ProfileImage()
   })
   

Use Cases

1. Responsive Video Players:

   Container({
     width: "100%",
     child: AspectRatio({
       aspectRatio: 1.78,
       child: VideoPlayer()
     })
   })
   

2. Image Galleries:

   GridView({
     children: images.map(image =>
       AspectRatio({
         aspectRatio: 1,
         child: Image(image)
       })
     )
   })
   

3. Cards with Media:

   Column({
     children: [
       AspectRatio({
         aspectRatio: 1.78,
         child: HeaderImage()
       }),
       CardContent()
     ]
   })
   

Best Practices

1. Responsive Design:

   • Use AspectRatio for consistent layouts
   • Consider different screen sizes
   • Test with various parent constraints

2. Content Fitting:

   • Use appropriate aspect ratios for content type
   • Consider content cropping
   • Handle overflow appropriately

3. Performance:

   • Avoid unnecessary nesting
   • Use const widgets when possible
   • Consider caching for lists

Common Patterns

1. Media Players:

   • Video players
   • Image galleries
   • Slideshows

2. Cards and Tiles:

   • Product cards
   • News articles
   • Photo galleries

3. Profile Pictures:

   • User avatars
   • Team member photos
   • Contact images

Tips and Tricks

1. Dynamic Ratios:

   • Calculate ratios based on content
   • Consider orientation changes
   • Handle edge cases

2. Content Scaling:

   • Use appropriate fit modes for images
   • Handle different content sizes
   • Consider placeholder content

3. Layout Integration:

   • Combine with other layout widgets
   • Handle parent constraints
   • Consider overflow cases