Image

The Image widget shows an image from uploaded assets or the URL link. The Image widget can display images such as JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.

Image widget

Adding an Image to Your Project

Here's how you add the Image widget to your project:

1. Open the Widget Palette and locate the Image widget under the Base Elements tab. You can drag it into your desired location or add it directly from the widget tree.

2. Move to the Properties Panel (on the right side of your screen) and scroll down to the Image section.

3. Find the Path property and enter the URL for the new image.

4. Find the Cache checkbox below and click on it to checkmark. Enabling the cache will store and display the image even when the internet is unavailable.

Every Image widget added to the project will show a random image from picsum.com by default.

Changing the Image Type

Here are the instructions for changing the Image type.

Add image from Unsplash

See how to add an image from Unsplash here.

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the Image widget, ensure you:

1. Understand Structuring the Firebase Database.

2. Completed all steps in the Firebase Setup section for your project.

3. Retrieved Data from either collection or document.

4. Finally, to show data into the Image widget, follow the steps here.

Show error image on failure

See how to display a custom image when an actual image fails to load.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing image dimension

To change the image size, move the Properties Panel > Image > find the Width and Height properties. You have three choices for setting the size:

• For a specific size, choose PX and type in the size you want.

• For a size based on the screen, choose % and type in the percentage.

• To make the image fill the whole screen width or height, click on the infinity symbol (∞).

The Mem Width and Mem Height properties are used to set the size of an image in the cache. They help optimize memory by scaling down large images fetched from the internet to a smaller size for caching.

You can also pick a size via the Set from Variable menu to set its size dynamically (i.e., from any variable).

The size of an image within a container is limited by the container's own dimensions. To make the image bigger, you'll need to enlarge the container as well.

Changing the Border Radius

Changing the Border Radius allows you to create rounded corners for the image.

Here's an example of how to create rounded corners:

1. Select Image from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.

3. Find the Border Radius property enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon () to change each corner separately.

Changing the Box Fit

Changing the Box Fit value allows you to control how the image should display inside the Image widget. Various options under the Box Fit property helps you scale (grow or shrink in size) the image inside the Image widget.

To change the Box Fit value:

1. Select Image from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.

3. Find the Box Fit dropdown, try changing it to the other values to get the perfect image.

Here are all the options that are available for the Box Fit property.

Cover

Cover: It shows the image as small as possible while still covering the entire Image widget.

Contain

Contain: It shows the image as large as possible while still containing entirely in the Image widget.

Fit Width

Fit Width: It tries to show the full width of the image, and does not care about the height even if the image gets clipped vertically.

Fit Height

Fit Height: It tries to show the full height of the image, and does not care about the width even if the image gets clipped horizontally.

Scale Down

Scale Down: It aligns the image in the center and if required it can also shrink the image(Keeping it proportional) to make it fully visible.

Fill

Fill: It shows the image as the exact size of the Image widget by distorting the image’s aspect ratio.

Align image withing a boundries

When an image exceeds its boundaries and you need to display a particular portion of it, simply select the Image widget and navigate to the Properties Panel > Image > use the Image Alignment property.

You can set any pre-defined alignment from the grid or use the X and Y boxes to set the precise alignment. For example, X and Y values as (-1.0, -1.0) aligns the image to the top-left corner, (1.0, 1.0) aligns it to the bottom right, and (0.0, 1.0) aligns the bottom of the image with the bottom edge.

Showing Image on Fullscreen

Please find the instructions on showing the image on full screen here.

Set dark mode image

See how you can show dark mode version of you image here.

Common widget properties

See how to work with Widget Styling, Visibility, Padding & Alignment, and Testing.