WImage

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

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,
  ImageLoadingBuilder? loadingBuilder,
})

Props#

Layout Modes#

WImage supports common image layout utilities to control how the image is resized and fitted within its container.

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-full 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-full 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 transition-opacity',
  ),
)

State Variants#

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

WImage(
  src: 'https://example.com/photo.jpg',
  className: 'opacity-100 hover:opacity-75 transition-opacity duration-300',
)

Styling Examples#

Profile Avatars#

Creating circular avatars with borders and shadows.

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

Rounded Cards#

Using specific border radius and shadow depth.

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

All Supported Classes#

Customizing Theme#

The default spacing, border radius, and colors 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.