Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding an Image to Your Project
  • Changing the Image Type
  • Showing Image from API
  • Changing the Box Fit
  • Changing the Aspect Ratio
  • Customizing
  • Changing image dimension
  • Changing the Border Radius
  • Common widget properties
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Image

PreviousRich TextNextButton

Last updated 1 month ago

The Image widget shows an image from uploaded assets or the URL link. The Image widget can display images such as JPEG and PNG.

Adding an Image to Your Project

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

  1. Select the Image widget from the Add Widget Button or add it directly from the widget tree.

  2. Under Widget Properties (on the right side of your screen), scroll down to Image Source section.

  3. Find the Network property for Image Type and enter the URL for the new image.

Changing the Image Type

Here are the instructions for changing the Image type.

Showing Image from API

To show the data retrieved from API Calls into the Image widget, ensure you:

  1. Understand how API Calls function.

  2. Completed all steps to define the API Call.

  3. Correctly defined DataSource for Widgets wrapping the Image widget.

  4. Finally, to show data into the Image widget, click on the variable icon besides the Image Source, and enter the value according to the API's endpoints.

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.

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

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

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

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.

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.

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.

Changing the Aspect Ratio

The aspect ratio is expressed as a ratio of width to height. For example, a 16:9 width:height aspect ratio would have a value of 16.0/9.0.

Customizing

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

Changing image dimension

To change the image size, move the Styling Properties Panel > find the Width and Height properties. You have two 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.

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.

  2. Move to the Widget Properties (on the right side of your screen) and select Styling Properties.

  3. Find the Border Radius property enter the values you want. The value can be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right).

Common widget properties

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

Choosing an Image from Assets