WImage

WImage(
  src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
  alt: 'Forest landscape',
  className: 'w-96 h-64 object-cover rounded-xl',
)

Basic Usage#

The WImage widget handles both network and asset images. For network images, simply provide the URL to the src property. For asset images, use the asset:// prefix.

// Network Image
WImage(
  src: 'https://example.com/image.jpg',
  className: 'w-32 h-32 rounded-full',
)

// Asset Image
WImage(
  src: 'asset://assets/images/logo.png',
  className: 'w-12 h-12',
)

Constructor#

const WImage({
  Key? key,
  String? src,
  ImageProvider? image,
  String? alt,
  String? className,
  Set<String>? states,
  Widget? placeholder,
  ImageErrorBuilder? errorBuilder,
  Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
})

Props#

Layout Modes#

WImage supports common image layout utilities to control how the image is resized and fitted within its container. Only fixed w-{n} and h-{n} sizes are applied; w-full and other fractional widths are ignored. For a full-width image, wrap it in WDiv(className: 'w-full').

Object Fit#

Control how the image content should be resized to fit its container using object-{fit} classes.

WImage(
  src: 'https://example.com/photo.jpg',
  className: 'w-64 h-64 object-contain bg-gray-200',
)

Object Position#

object-cover centres the crop, so in a short, wide banner the upper part of a tall photo (a face, a skyline) is cut off. Choose which part stays in view with object-{position} classes: object-top, object-bottom, object-left, object-right, object-left-top, object-left-bottom, object-right-top, object-right-bottom and object-center (the default). They combine with every fit class and map to the matching Flutter Alignment on the image.

WImage(
  src: 'https://example.com/backdrop.jpg',
  className: 'w-96 h-40 object-cover object-top',
)

Aspect Ratio#

Ensure the image maintains a specific aspect ratio regardless of its content dimensions.

WImage(
  src: 'https://example.com/banner.jpg',
  className: 'w-96 aspect-video object-cover',
)

Event Handling#

WImage is a display-only widget and does not include built-in gesture handlers. To make an image interactive, wrap it in a WAnchor or WButton.

WAnchor(
  onTap: () => print('Image clicked!'),
  child: WImage(
    src: 'https://example.com/avatar.jpg',
    className: 'w-12 h-12 rounded-full hover:opacity-80',
  ),
)

State Variants#

You can use state prefixes to change the image's appearance based on parent state or custom state sets.

WImage has no anchor of its own, so hover: only fires when an ancestor publishes state (WAnchor, WButton, WPopover).

WAnchor(
  onTap: () {},
  child: WImage(
    src: 'https://example.com/photo.jpg',
    className: 'w-64 h-40 opacity-100 hover:opacity-75',
  ),
)

Styling Examples#

Profile Avatars#

Creating circular avatars with borders.

WImage(
  src: 'https://example.com/user.jpg',
  className: 'w-16 h-16 rounded-full border-2 border-white dark:border-gray-800 object-cover',
)

Rounded Cards#

Using a specific border radius on the top corners.

WImage(
  src: 'https://example.com/thumbnail.jpg',
  className: 'w-80 h-48 rounded-t-lg object-cover',
)

All Supported Classes#

WImage does not apply shadow-* classes. To cast a shadow, put the image inside a WDiv that carries the shadow.

Customizing Theme#

The default spacing, border radius, and colours used by WImage are controlled via WindThemeData.

WindThemeData(
  borderRadius: {
    'xl': 12.0,
  },
  // WImage also respects the default spacing scale for w-* and h-* classes
)

Related Documentation#

• WDiv - The fundamental layout container.
• WSvg - For vector-based graphics.
• WIcon - For system and custom icons.