ArcaneAspectRatio#

Container that maintains a specific aspect ratio for its content.

Basic Usage#

ArcaneAspectRatio(
  ratio: 16 / 9,
  child: ArcaneImage(src: 'video-thumbnail.jpg'),
)

Properties#

Property	Type	Default	Description
`ratio`	`double`	required	Aspect ratio (width/height)
`child`	`Component`	required	Child component
`classes`	`String?`	-	Additional CSS classes
`styles`	`Map<String, String>?`	-	Additional inline styles

Presets#

Square (1:1)#

ArcaneAspectRatio.square(
  child: ArcaneAvatar(name: 'User'),
)

Video (16:9)#

ArcaneAspectRatio.video(
  child: video(src: 'intro.mp4'),
)

Portrait (3:4)#

ArcaneAspectRatio.portrait(
  child: ArcaneImage(src: 'portrait.jpg'),
)

Photo (4:3)#

ArcaneAspectRatio.photo(
  child: ArcaneImage(src: 'landscape.jpg'),
)

Golden Ratio (1.618:1)#

ArcaneAspectRatio.golden(
  child: content,
)

Ultrawide (21:9)#

ArcaneAspectRatio.ultrawide(
  child: bannerImage,
)

Custom Ratios#

// Cinema scope (2.35:1)
ArcaneAspectRatio(
  ratio: 2.35,
  child: moviePoster,
)

// Instagram square
ArcaneAspectRatio(
  ratio: 1.0,
  child: instagramPost,
)

// Twitter header (3:1)
ArcaneAspectRatio(
  ratio: 3.0,
  child: headerImage,
)

Common Use Cases#

Responsive Image Container#

ArcaneAspectRatio.video(
  child: ArcaneImage(
    src: 'thumbnail.jpg',
    fit: ObjectFit.cover,
  ),
)

Video Player#

ArcaneAspectRatio.video(
  child: iframe(
    src: 'https://youtube.com/embed/...',
    attributes: {'allowfullscreen': 'true'},
  ),
)

Card Preview#

ArcaneCard(
  child: ArcaneColumn(children: [
    ArcaneAspectRatio.photo(
      child: ArcaneImage(src: 'product.jpg'),
    ),
    ArcaneDiv(children: [
      ArcaneText('Product Name'),
    ]),
  ]),
)